S2JS - Sensing the mouse and touches : Drawing lines

Let's tidy up, put things in a function, and do something useful like leave a trail.

We do this by drawing a small circle with each move notification, and cunningly, not doing a clearRect() so a trail gets created.

<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) { Leave_a_Mark(MyEvent.touches[0]); MyEvent.preventDefault() } function MyMouseMoveHandler(MyEvent) { Leave_a_Mark(MyEvent); } myCanvas.addEventListener("touchmove", MyTouchMoveHandler); myCanvas.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>