HTML5 Canvas, 2nd Edition

Mouse Events

Because we are going to create our own functions for interactivity between the mouse and our custom canvas audio controls, we need to add some event handlers for certain common mouse events.

First, we need to create a couple variables—mouseX and mouseY—that will hold the current x and y locations of the mouse pointer:

var mouseX;
var mouseY;

Next we need to create the event handlers. First, we listen for the mouseup event. This event fires when a user stops pressing the mouse button. We will listen for this event when we are trying to determine whether we should stop dragging the volume slider:

theCanvas.addEventListener("mouseup",eventMouseUp, false);

We also need to listen for the mousedown event to determine whether the play/pause button was pressed, the loop on/off toggle button was pressed, and/or the volume slider was clicked, so that we can start dragging it:

theCanvas.addEventListener("mousedown",eventMouseDown, false);

Finally, we listen for the mousemove event so that we can figure out the current x and y locations of the mouse pointer. We use this value to determine whether buttons have been pressed, as well as whether the volume slider has been clicked and/or dragged:

theCanvas.addEventListener("mousemove",eventMouseMove, false);