HTML5 Canvas: How to draw a constant-sized image that translates properly when zooming?

I want to create a canvas that draws a background image but allows zooming and dragging as well. I came across this stackoverflow answer Zoom Canvas to Mouse Cursor. It’s perfect except for one thing, it scales every image it draws because of the canvas scale factor.

I need to draw some markers on the image that don’t scale when zooming in, kinda like those red arrows on google maps.
So I tried scaling the size of the image by the inverse of the zoom factor so it would be constant-sized and it worked but of course it doesn’t stay at a specific spot on the image. Why does this happen and how should I fix it?

Source: javascript

Leave a Reply