javascriptimagecanvasdrawmouse-position

Canvas Refrence point of drawing using mouse change we zoom in

I want to write on the image using canvas but when I zoom the image mouse pointer change and it does not write in the correct place

kindly help me where I need to change that code Thanks in advance

Solution

  • One way you can do is that calculate the scale how much it increases with zoom in and then multiple your x and y coordinate with that scale

     var rect = canvas.getBoundingClientRect();  // abs. size of element
 scaleX = canvas.width / rect.width;  // relationship bitmap vs. element for X
 scaleY = canvas.height / rect.height; // relationship bitmap vs. element for Y
 mouseX = mouseX*scaleX;
 mouseY = mouseY*scaleY;