S2JS - Sensing the mouse and touches : Finding useful coordinates3

The magic happens using the following line of code:

rect = myCanvas.getBoundingClientRect();

It's effect is to tell us the actual coordinates of the canvas within the browser window.

By subtracting that, we get exactly perfect coordinates within the canvas.

Try moving around the canvas below, and ensure everything works as you'd expect.

The code now is a bit ugly and unwieldy, but we can fix that.

<HTML> <body> <canvas id=myCanvas height=200 width=250 style="background-color: khaki"> </canvas> <script> var ctx = myCanvas.getContext("2d"); ctx.font="15px arial"; function MyTouchMoveHandler(MyEvent) { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); var rect = myCanvas.getBoundingClientRect(); ctx.fillText("X=" + (MyEvent.touches[0].clientX - rect.left), 0, 20); ctx.fillText("Y=" + (MyEvent.touches[0].clientY - rect.top), 0, 40); MyEvent.preventDefault() } function MyMouseMoveHandler(MyEvent) { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); var rect = myCanvas.getBoundingClientRect(); ctx.fillText("X=" + (MyEvent.clientX - rect.left), 0, 20); ctx.fillText("Y=" + (MyEvent.clientY - rect.top), 0, 40); } myCanvas.addEventListener("touchmove", MyTouchMoveHandler); myCanvas.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>