Canvas & Retina: Shift image position on retina when getting getImageData() from one canvas and rendering part of the image in another?

Question

Canvas

I'm writing a pipette.

When moving the mouse on the canvas, I take the coordinates of the cursor and get the image and paste it into another canvas that is much smaller (preview yes colors)

//canvas.lowerCanvasEl - это htmk element canvas, его размеры 1920x1080
previewCanvas.ctx.drawImage(canvas.lowerCanvasEl, x - 7, y - 7, 128, 128, 0, 0, 128, 128) // у previewCanvas размеры 128x128

So, on windows or other screens, everything works OK, but on the retina in mac os previewCanvas does not display the image correctly, it has a large shift.

how can it be solved?

Answer 1

Most likely, I did not take into account window.devicePixelRatio somewhere