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

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