Mixing HTML5 Video and Canvas - HTML5 Canvas - page 516

iif ( ! videoElement . paused ) {
context . drawImage ( buttonSheet , 0 , 32 , bW , bH , playX , playY , bW , bH ); //Play Down

} else else {

context . drawImage ( buttonSheet , 0 , 0 , bW , bH , playX , playY , bW , bH ); //Play up

}

Displaying the pause button is simply the opposite of play. If the video paused property is
true , we display the “down” version of the pause button. If the video is playing, it means the
pause property is false , so we display the “up” version. Notice that the second parameter is
32 because to display the pause buttons in the tile sheet, we need to skip over the play button
and start at the x position of the pause button:

iif ( videoElement . paused ) {
context . drawImage ( buttonSheet , 32 , 32 , bW , bH , pauseX , pauseY , bW , bH ); //down
} else else {

context . drawImage ( buttonSheet , 32 , 0 , bW , bH , pauseX , pauseY , bW , bH ); // up

}

context . drawImage ( buttonSheet , 64 , 0 , bW , bH , stopX , stopY , bW , bH ); // Stop up

Finally, we update our timeCounter to limit the mouseUp events we listen to. We will show
how this works in the next section:

timeWaited ++ ;

Listening for the button presses

We also need to listen for the mouse button click. This process is very similar to how we ac-
complished much the same thing in the Video Puzzle application. First, in the canvasApp()
function, we set an event handler, eventMouseUp() , for the mouseup event:

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

The way that the eventMouseUp() function works is very similar to the same function we
created earlier for Video Puzzle. First, we test to see whether we have waited enough time
( buttonWait ) to accept another mouse click. If so, we drop in and set timeWaited to 0 to
reset the wait time. Next, we find the mouse pointer's x and y positions based on the way the
browser tracks those values, and we put those values into local mouseX and mouseY variables:

function function eventMouseUp ( event ) {

iif ( timeWaited >= buttonWait ) {
timeWaited = 0 ;
var var mouseX ;

var

var mouseY ;