HTML5 Canvas [113]
If it is equal to or greater than itemsToLoad, we call canvasApp() to start the application:
function itemLoaded() {
loadCount++;
if (loadCount >= itemsToLoad) {
canvasApp();
}
}
Placing the buttons
We need to set some variables in canvasApp() that will represent the locations of the three buttons we will display: play, pause, and stop. We start by specifying the standard button width and height as the variables bW and bH. All the images in the videobuttons.png tile sheet are 32×32 pixels, so we will set bW and bH accordingly. Then, we proceed to create variables that represent the x and y locations of each button: playX, playY, pauseX, pauseY, stopX, and stopY. We could use literal values; however, these variables will make a couple of the more complicated calculations easier to swallow:
var bW = 32;
var bH = 32;
var playX = 190;
var playY = 300;
var pauseX = 230;
var pauseY = 300;
var stopX = 270
var stopY = 300;
In the drawImage() function, we need to test for the current state of the playing video and render the buttons accordingly. For this application, we will use the paused state of the video object’s attribute to render the buttons properly in their “up” or “down” states.
When a video first loads on the page and is not yet playing, its paused attribute is set to true. When a video is playing, its paused attribute is set to false. Knowing this, we can create the actions for these simple buttons.
First, if we know that the video is not in a paused state, it must be playing, so we display the “down” version of the play button. The “down” position is in the second row on the tile sheet in Figure 6-11. The third parameter of the call to the drawImage() function is 32 because that is where the y position of the image we want to display starts on the tile sheet. If paused is true, it means the video is not playing, so we display the “up” version of the play button. It starts at y position 0:
if (!videoElement.paused) {
context.drawImage(buttonSheet, 0,32,bW,bH,playX,playY,bW,bH); //Play Down
} 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:
if (videoElement.paused) {
context.drawImage(buttonSheet, 32,32,bW,bH,pauseX,pauseY,bW,bH); //down
} 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
Listening for the button presses
We also need to listen for the mouse button click. This process is very similar to how we accomplished much the same thing in the Video Puzzle application. First, back in the canvasApp() function, we set an event handler, eventMouseUp(), for the mouseup event:
theCanvas.addEventListener("mouseup",eventMouseUp, false);
The eventMouseUp() function works very similar to the same function we created earlier for Video Puzzle. First, 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 eventMouseUp(event) {
var mouseX;
var mouseY;
if ( event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
//Hit Play
Next, we test for a hit test point inside each button by checking the bounds (right, left, top, bottom) on the canvas to see whether the mouse pointer was over any of our buttons when it was clicked.