HTML and CSS Reference
In-Depth Information
Resizing an Image Painted to the Canvas
Topaintandscaledrawnimages,wecanalsopassparametersintothe
drawImage()
function.
For example, this second version of
drawImage()
takes in an extra two parameters:
drawImage
(
Image
,
dx
,
dy
,
dw
,
dh
)
dw
and
dh
represent the width and height of the rectangle portion of the canvas where our
sourceimagewillbepainted.Ifwewanttoscaletheimagetoonly64×64or16×16,wewould
use the following code:
context
.
drawImage
(
spaceShip
,
0
,
0
,
64
,
64
);
context
.
drawImage
(
spaceShip
,
0
,
0
,
16
,
16
);
Example 4-2
draws various sizes to the canvas.
Example 4-2. Resizing an image as it is drawn
function
function
eventSheetLoaded
() {
drawScreen
();
}
function
function
drawScreen
() {
context
.
drawImage
(
spaceShip
,
0
,
0
);
context
.
drawImage
(
spaceShip
,
0
,
34
,
32
,
32
);
context
.
drawImage
(
spaceShip
,
0
,
68
,
64
,
64
);
context
.
drawImage
(
spaceShip
,
0
,
140
,
16
,
16
);
}
See
Figure 4-3
for the output to this example.
