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-
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
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-
corner of each is 0,0.
Search WWH ::

Custom Search