HTML and CSS Reference
In-Depth Information
Figure 4-3. Resizing an image as it is drawn
In
Example 4-2
,
we have added a gray box so that we can better see the placement of the im-
agesonthecanvas.Theimageweplacedonthescreencanscaleinsizeasitispainted,saving
us the calculation and steps necessary to use a matrix transformation on the object. The only
caveat is that the scale origin point of reference is the top-left corner of the object. If we used
amatrix operation, we could translate the origin point tothe center ofthe object before apply-
ing the scale.
We have placed two 32×32 objects on the canvas to show that these two function calls are
identical:
context
.
drawImage
(
spaceShip
,
0
,
0
);
context
.
drawImage
(
spaceShip
,
0
,
34
,
32
,
32
);
Aside from the fact that the second is placed 34 pixels below the first, the extra 32,32 at the
end of the second call is unnecessary because it is the original size of the object. This demon-
stratesthatthescaleoperationdoesnottranslate(ormove)theobjectonanyaxis.Thetop-left
corner of each is 0,0.
