HTML5 Canvas, 2nd Edition

Play/Pause Push Button: Hit Test Point Revisited

The first thing we need to do when implementing the play/pause button is create the event handler for the mousemove event. The function really is just the standard cross-browser code we introduced earlier in the book for tracking the mouse position, depending on which properties the DOM in browsers supports: pageX/pageY or e.clienX/e.clientY. This function is called every time the mouse is moved on the canvas to update the mouseX and mouseY variables. Those variables are scoped to canvasApp() so that all functions defined inside of it can access them:

function eventMouseMove(event) {
    var x;
    var y;
    if (event.pageX || event.pageY) {
         x = event.pageX;
         y = event.pageY;
    }
    else {
         x = e.clientX + document.body.scrollLeft +
         document.documentElement.scrollLeft;
         y = e.clientY + document.body.scrollTop + 
             document.documentElement.scrollTop;
    }
    x -= theCanvas.offsetLeft;
    y -= theCanvas.offsetTop;

    mouseX=x;
    mouseY=y;
   }

Now we need to create the eventMouseUp() handler function. This function is called when the user releases the mouse button after clicking. Why after, and not when the mouse is clicked? Well, one reason is because we generally use the mousedown event for the start of a “dragging” operation, which we will show you shortly.

The first thing we do here, just like in CH6EX11.html in the last chapter, is test to see whether timeWaited is greater than buttonWait. If so, we will accept a new mouseUp event. If not, we skip it.

The heart of this ...