HTML and CSS Reference
In-Depth Information
3. Draw a yellow box around the piece that has its
selected
property set to
true
.
We start our loop by finding the
x
and
y
(
imageX
,
imageY
) locations to “cut” the puzzle piece
from the video object. We do this by taking the
finalRow
and
finalCol
properties of the dy-
namic piece objects we created and multiplying them by the
partWidth
and
partHeight
, re-
spectively. We then have the origin point (top-left
x
and
y
locations) for the piece of the video
to display:
for
for
(
var
var
c
=
0
;
c
<
cols
;
c
++
) {
for
for
(
var
var
r
=
0
;
r
<
rows
;
r
++
) {
var
var
tempPiece
=
board
[
c
][
r
];
var
var
imageX
=
tempPiece
.
finalCol
*
partWidth
;
var
var
imageY
=
tempPiece
.
finalRow
*
partHeight
;
Now that we know the origin point of the video we will display for a particular piece of
the puzzle, we need to know where it will be placed on the canvas. While the code below
might look confusing, it's really just simple arithmetic. To find the
x
location (
placeX
) of a
piece, multiply the
partWidth
times the current iterated column (
c
), add the current iterated
column multiplied by the
xPad
(the number of pixels between each piece), and then 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
var
placeX
=
c
*
partWidth
+
c
*
xPad
+
startXOffset
;
var
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.) 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.
