Mixing HTML5 Video and Canvas - HTML5 Canvas - page 299

each piece), and add the startXOffset , which is the x location of the upper-left corner
of the entire board of pieces. Finding placeY is very similar, but you use the current row
( r ), yPad , and partHeight in the calculation:
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);
}
}