From aaae50e68991db6c3680b3c94bacce49af2c7e0d Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Wed, 4 Dec 2019 23:04:44 +0000
Subject: [PATCH] Adjust for layer canvas pixel ratio and rotation

---
 examples/layer-spy.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/layer-spy.js b/examples/layer-spy.js
index d7d27bc0a8..4418e7a5ca 100644
--- a/examples/layer-spy.js
+++ b/examples/layer-spy.js
@@ -3,6 +3,7 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import XYZ from '../src/ol/source/XYZ.js';
+import {getRenderPixel} from '../src/ol/render.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
@@ -65,14 +66,15 @@ container.addEventListener('mouseout', function() {
 // before rendering the layer, do some clipping
 imagery.on('prerender', function(event) {
   const ctx = event.context;
-  const pixelRatio = event.frameState.pixelRatio;
   ctx.save();
   ctx.beginPath();
   if (mousePosition) {
     // only show a circle around the mouse
-    ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
-      radius * pixelRatio, 0, 2 * Math.PI);
-    ctx.lineWidth = 5 * pixelRatio;
+    const pixel = getRenderPixel(event, mousePosition);
+    const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
+    const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
+    ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
+    ctx.lineWidth = 5 * canvasRadius / radius;
     ctx.strokeStyle = 'rgba(0,0,0,0.5)';
     ctx.stroke();
   }