Images on the Canvas - HTML5 Canvas - page 127

The website for this topic contains only the files necessary to complete
the examples. We have modified Ari's files to fit the needs of this topic.
Figure 4-2 shows two copies of the image painted to the canvas. One of the copies has
the top-left starting location of 0,0, and the other starts at 50,50.
Figure 4-2. Draw multiple objects with a single source
Resizing an Image Painted to the Canvas
To paint and scale drawn images, we can also pass parameters into the 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 source image will be painted. If we only want to scale the image to 64×64 or 16×16,
we would 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 eventShipLoaded() {
drawScreen();
}
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.