2 ways to get a mouse click relative to the Canva position

If you add the onmousedown event to the canvas, the mouse position obtained is relative to the position of the current document (x, y):

The first type of conversion:

(x-x1,y-y1)

X, y is the mouse click position, the Getboundingclientrect method is the canvas comes with a function to get the location information of the paint area

function Windowtocanvas (x, y) {   var bbox = Canvas.getboundingclientrect ();   return {x:x-Bbox.left * (canvas.width  /bbox.width),            y:y-bbox.top  * (Canvas.height/bbox.height)};}

The second type is more concise:

Canvas.onmousedown = function (e) {   //var loc = Windowtocanvas (e.clientx| | e.x, e.clienty| | E.Y);   var x=e.layerx| | E.offsetx;   var y=e.layery| | e.offsety;   E.preventdefault (); Prevent cursor Change   savedrawingsurface ();   mousedown.x = loc.x;   MOUSEDOWN.Y = loc.y;   dragging = true;};

Only Firefox supports Layerx, and other browsers support the standard OFFSETX

2 ways to get a mouse click relative to the Canva position