S2JS - Sensing the mouse and touches : Drawing lines with multiple fingers

Our touch handler is actually under-performing. On a touch enabled device, it's possible to draw with multiple fingers at the same time. But we're only using the first touch-point.

The way we achieve this in the code is to make use of our knowledge of for loops and arrays, so we leave a mark for as many fingers are moving.

Remember: many fingers, only one mouse.

<HTML> <body> <canvas id=myCanvas height=200 width=250 style="background-color: khaki"> </canvas> <script> var ctx = myCanvas.getContext("2d"); function Leave_a_Mark(MyWhere) { var rect = myCanvas.getBoundingClientRect(); ctx.beginPath(); ctx.arc(MyWhere.clientX - rect.left, MyWhere.clientY - rect.top, 5, 0, Math.PI * 2); ctx.fill(); } function MyTouchMoveHandler(MyEvent) { for (var i=0; i < MyEvent.touches.length; i++) { Leave_a_Mark(MyEvent.touches[i]); } MyEvent.preventDefault() } function MyMouseMoveHandler(MyEvent) { Leave_a_Mark(MyEvent); } myCanvas.addEventListener("touchmove", MyTouchMoveHandler); myCanvas.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>