S2JS - Rotating, flipping, pointing - another game : Keeping track of touch 2

Here's the code. Although there may be many fingers touching, for simplicity we'll just detect the first entry in the touch array (element zero).

Notice we're using the same function for both the touchstart and touchmove events, because we want to do the same thing for both events -- just update the "mouse" position variables.

If you're using S2JS on a touch-sensitive device, you'll be able to meander your finger over the canvas and will see the numbers update.

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var mouse_x = 0; var mouse_y = 0; // Where is the mouse function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame ctx.font="25px Arial"; ctx.fillText("Mouse is at " + mouse_x + ", " + mouse_y, 0, 20); } function MyTouchMoveHandler(MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x = MyEvent.touches[0].clientX - rect.left; mouse_y = MyEvent.touches[0].clientY - rect.top; MyEvent.preventDefault() } addEventListener("touchmove", MyTouchMoveHandler); addEventListener("touchstart", MyTouchMoveHandler); function MyMouseMoveHandler (MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x= MyEvent.clientX - rect.left; mouse_y= MyEvent.clientY - rect.top; } addEventListener("mousemove", MyMouseMoveHandler); setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>