HTML5 Canvas [48]
NOTE
The website for this book contains only the files necessary to complete the examples. We have modified Ari’s files to fit the needs of this book.
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.
Figure 4-3. Resizing an image as it is drawn
In Example 4-2, we have added a gray box so we can better see the placement of the images on the canvas. The image we placed on the screen can scale in size as it is painted, 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 a matrix operation, we could translate the origin point to the center of the object before applying 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 demonstrates that the scale operation does not translate (or move) the object on any axis. The top-left corner of each is 0,0.
Copying Part of an Image to the Canvas
The third set of parameters that can be passed into drawImage() allows us to copy an arbitrary rectangle of data from a source image and place it onto the canvas. This image data can be resized as it is placed.
We are going to use a second source image for this set of operations: spaceships that have been laid out on what is called a tile sheet (also known as a sprite sheet, a texture sheet, or by many other names). This type of file layout refers to an image file that is broken up physically into rectangles of data. Usually these rectangles have an equal width and height. The “tiles” or “sprites” we will be using are 32 pixels wide by 32 pixels high, commonly referred to as 32×32 tiles.
Figure 4-4 shows a tile sheet with the grid lines turned on in the drawing application. These grid lines separate each of the tiles on the sheet.
Figure 4-4. The tile sheet inside a drawing program
Figure 4-5 is the actual tile sheet—without grid lines—that we will use for our further examples.
Figure 4-5. The tile sheet exported for use in an application
The structure of the parameters for this third version of the drawImage() function looks like this:
drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)
sx and sy represent the “source positions” to start copying the source image to the canvas. sw and sh represent the width and height of the rectangle starting at sx and sy. That rectangle will be copied to the canvas at “destination” positions dx and dy. As with the previous drawImage() function, dw and dh represent the newly scaled width and height for the image.
Example 4-3 copies the second version of our spaceship