Obtain Co-ordinates Of An Html5 Canvas On A Page

I have a a canvas inside another canvas. its css is something #canvas2{ position:absolute; width :95%; heig

Solution 1:

Has your canvas been scrolled?

If yes, then you also need to account for the distance the canvas has been scrolled in the browser.

You might check out canvas.getBoundingClientRect() as a way to get the canvas position with the scrolling accounted for:

functionhandleMousemove(e){

     e.preventDefault();
     e.stopPropagation();

     // if the canvas is stationary (not scrolling) then you can do// .getBoundingClientRect once at the start of the appvarBB=canvas.getBoundingClientRect();

     // calc mouse position based on the bounding boxvar mouseX=parseInt(e.clientX-BB.left);
     var mouseY=parseInt(e.clientY-BB.top);

     console.log(mouseX+"/"+mouseY);

}