1.6. Event Handling

HTML5 applications are event driven. You register event listeners with HTML elements and implement code that responds to those events. Nearly all Canvas-based applications handle either mouse or touch events—or both—and many applications also handle various events such as keystrokes and drag and drop.

1.6.1. Mouse Events

Detecting mouse events in a canvas is simple enough: You add an event listener to the canvas, and the browser invokes that listener when the event occurs. For example, you can listen to mouse down events, like this:

canvas.onmousedown = function (e) {
    // React to the mouse down event
};

Alternatively, you can use the more generic addEventListener() method:

Click here to view code image

canvas.addEventListener('mousedown', function (e) {
    // React to the mouse down event
});