Working with Audio - HTML5 Canvas - page 581

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 topic for tracking the mouse position, depending on which prop-
erties 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 vari-
ables.Thosevariablesarescopedto canvasApp() sothatallfunctionsdefinedinsideofitcan
access them:

function function eventMouseMove ( event ) {

var

var x ;
var

var y ;
iif ( event . pageX || event . pageY ) {
x = event . pageX ;
y = event . pageY ;

}
else

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 dohere, just like in CH6EX11.html inthe last chapter,is test tosee whether
timeWaited is greater than buttonWait . If so, we will accept a new mouseUp event. If not,
we skip it.
The heart of this function is a hit test point-style collision detection check for the buttons. We
discussed this in depth in Chapter 6 when we created the buttons for the video puzzle game
( CH6EX10.html ). Notice that here we are using the variables we create to represent the x and
y locations of the button ( playX , playY ) and the width and height of a button ( bW , bH ) to form