Fix magnify example

examples/magnify.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 BingMaps from '../src/ol/source/BingMaps.js';
+import {getPixelFromPixel} from '../src/ol/render.js';
 
 const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
 
@@ -50,14 +51,15 @@ container.addEventListener('mouseout', function() {
 // after rendering the layer, show an oversampled version around the pointer
 imagery.on('postrender', function(event) {
   if (mousePosition) {
+    const pixel = getPixelFromPixel(event, mousePosition);
+    const offset = getPixelFromPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
+    const half = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
     const context = event.context;
-    const pixelRatio = event.frameState.pixelRatio;
+    const centerX = pixel[0];
-    const half = radius * pixelRatio;
+    const centerY = pixel[1];
-    const centerX = mousePosition[0] * pixelRatio;
-    const centerY = mousePosition[1] * pixelRatio;
     const originX = centerX - half;
     const originY = centerY - half;
-    const size = 2 * half + 1;
+    const size = Math.round(2 * half + 1);
     const sourceData = context.getImageData(originX, originY, size, size).data;
     const dest = context.createImageData(size, size);
     const destData = dest.data;
@@ -82,7 +84,7 @@ imagery.on('postrender', function(event) {
     }
     context.beginPath();
     context.arc(centerX, centerY, half, 0, 2 * Math.PI);
-    context.lineWidth = 3 * pixelRatio;
+    context.lineWidth = 3 * half / radius;
     context.strokeStyle = 'rgba(255,255,255,0.5)';
     context.putImageData(dest, originX, originY);
     context.stroke();