S2JS - Sensing the mouse and touches : Drawing lines when the mouse is down

We can enhance our mouse-handling too, so we only leave a trail when the left mouse button is down.

The steps for doing this are:

Declare a variable to keep track of whether the button is down
Create a mousedown handler and set the variable to true if the left button has gone down
Create a mouseup handler and set the variable to false if the left button has gone up
In the MouseMoveHandler, only draw the mark if the variable is set to true

You may notice if you move the mouse quite quickly, the line drawn is somewhat spotty. We're going to fix that with a more sophisticated drawing program, but first we're going to introduce a new way of storing variables.

<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() } var mouse_is_down = false; function MyMouseDownHandler(MyEvent) { if (MyEvent.which == 1) mouse_is_down= true; } function MyMouseUpHandler(MyEvent) { if (MyEvent.which == 1) mouse_is_down= false; } function MyMouseMoveHandler(MyEvent) { if (mouse_is_down) Leave_a_Mark(MyEvent); } myCanvas.addEventListener("mousedown", MyMouseDownHandler); myCanvas.addEventListener("mouseup", MyMouseUpHandler); myCanvas.addEventListener("touchmove", MyTouchMoveHandler); myCanvas.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>