0

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?

Community
  • 1
  • 1
Ollie
  • 127
  • 1
  • 3
  • 8

1 Answers1

1

Draw 2 canvases on each other.The upper one(with a higher zindex) will be utilized for drawing the markers.The lower canvas(with a lower zindex) will be used to draw image on.You should perform all your manipulations(zoom and pan) on the lower canvas context keeping the upper one unchanged.

AkshayJ
  • 771
  • 6
  • 15