O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

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

TRACK MOUSE ACTIVITY ON THE CANVAS

Tracking mouse activity on the canvas allows your users to interact with your canvas drawing. This process involves registering event listener functions on mouse event activity. Your canvas JavaScript can identify what the user clicked and update the display accordingly:

canvas.addEventListener(eventType, onEventFunction, false);

Note that the canvas object is used here, not context; the event listener registration is predicated on the actual canvas element, not the Canvas API. You can now supply eventType, onEventFunction, and a Boolean, which almost always is false: This indicates that events bubble up the DOM starting at the canvas element, which is most appropriate in a mouse-activity context.

The following ...

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