S2JS - Sensing the mouse and touches : Finding useful coordinates

We learned early in S2JS that the HTML canvas has x=0, y=0 at the top left corner. So you'd expect the mouse (or finger) to report x=0, y=0 when it's in the top left of the canvas. But it's clearly not.

As it happens, the coordinates we receive in the events are relative to the top-left of our simulated browser window, not the canvas.

In the example below, I haven't constrained the events to the canvas -- we'll get events for the entire window.

Roam your mouse or finger around the simulated screen and get an understanding of where the (0,0) point is.

<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); ctx.fillText("X=" + MyEvent.touches[0].clientX, 0, 20); ctx.fillText("Y=" + MyEvent.touches[0].clientY, 0, 40); MyEvent.preventDefault() } function MyMouseMoveHandler(MyEvent) { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.fillText("X=" + MyEvent.clientX, 0, 20); ctx.fillText("Y=" + MyEvent.clientY, 0, 40); } myCanvas.addEventListener("touchmove", MyTouchMoveHandler); document.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>