HTML5 Canvas [109]
var placeX = c*partWidth+c*xPad+startXOffset;
var placeY = r*partHeight+r*yPad+startYOffset;
Now it’s time to draw the piece on the canvas. We need to “cut” out the part of the video that we will display for each piece of the puzzle (we won’t actually cut anything though). We will again use the drawImage() function, as we have many other times already. However, now we use the version of drawImage() that accepts nine parameters:
videoElement
The image that we are going to display; in this case, it is the video.
imageX
The x location of the upper-right order of the part of the image to display.
imageY
The y location of the upper-right order of the part of the image to display.
partWidth
The width from the x location of the rectangle to display.
partHeight
The height from the y location of the rectangle to display.
placeX
The x location to place the image on the canvas.
placeY
The y location to place the image on the canvas.
partWidth
The width of the image as displayed on the canvas.
partHeight
The height of the image as displayed on the canvas.
We’ve already discussed how we calculated most of these values, so it is just a matter of knowing the drawImage() API function and plugging in the variables:
context.drawImage(videoElement, imageX, imageY, partWidth, partHeight,
placeX, placeY, partWidth, partHeight);
There is one last thing we are going to do in this function. If a puzzle piece is marked as “selected” (the selected Boolean property is true), we will draw a yellow box around the piece:
if (tempPiece.selected) {
context.strokeStyle = '#FFFF00';
context.strokeRect( placeX, placeY, partWidth, partHeight);
}
}
}
}
Detecting mouse interactions and the canvas
Recall that back in the canvasApp() function, we set an event listener for the mouseup action with the event handler function set to eventMouseUp. We now need to create that function:
theCanvas.addEventListener("mouseup",eventMouseUp, false);
The first thing we do in the eventMouseUp() function is test to find the x and y locations of the mouse pointer when the button was pressed. We will use those coordinates to figure out whether the user clicked on any of the puzzle pieces.
Since some browsers support the layerX/layerY properties of the event object, and others support the offsetX/offsetY properties, we need to support both. No matter which one is set, we will use those properties to set our mouseX and mouseY variables to the x and y locations of the mouse pointer:
function eventMouseUp(event) {
var mouseX;
var mouseY;
var pieceX;
var pieceY;
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;
}
Creating hit test point-style collision detection
Now that we know where the user clicked, we need to test whether that location “hits” any of the puzzle pieces. If so, we set the selected property of that piece to true. What we are going to perform is a simple hit test point-style hit detection. It will tell us whether the x,y position (point) of the mouse is inside (hits) any one of the puzzle pieces when the mouse button is clicked.
First, we create a local variable named selectedList that we will use when we need to swap the pieces in the board array. Next, we will use a set of two nested for:next loops to traverse through all the pieces in the board array. Inside the for:next loops, the first thing we do is find the top-left corner x and y points of the current piece pointed to by board[c][r]. We calculate those values and put them into the placeX and placeY variables:
var selectedList= new Array();
for (var c = 0; c < cols; c++) {
for (var r =0; r < rows; r++) {
pieceX = c*partWidth+c*xPad+startXOffset;
pieceY = r*partHeight+r*yPad+startYOffset;
Next, we use those