O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required