HTML5 Web Application Development By Example Beginner's guide

Time for action – using the mouse to draw

The first thing we need to do is capture mouse events. Let's go into our CanvasPadApp object and add the code to check for them in the start() method. As you may recall, we already added a mousemove event handler above. Now we will add handlers for mousedown, mouseup, and mouseout events:

$("#main>canvas").mousemove(onMouseMove)
    .mousedown(onMouseDown)
    .mouseup(onMouseUp)
    .mouseout(onMouseUp);

No, there's not a mistake in mouseout. We want the mouseout event to be handled the same way as mouseup, so they both stop the drawing process. The mouseout event is fired when the mouse leaves the <canvas> element. When that happens we can't get mousemove events anymore and therefore lose track of the pen position. ...