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.

Before we implement the event handlers we need a couple of new variables to keep track of things. We need a Boolean value to keep track of when we are drawing, an array to keep track of the current set of points, and an array to...