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();
   }