HTML and CSS Reference
In-Depth Information
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
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 “se-
lected”(the
selected
Booleanpropertyis
true
),wewilldrawayellowboxaroundthepiece:
iif
(
tempPiece
.
selected
) {
context
.
strokeStyle
=
'#FFFF00'
;
context
.
strokeRect
(
placeX
,
placeY
,
partWidth
,
partHeight
);
}
}
}
}
Detecting mouse interactions and the canvas
Recall that 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:
