Images on the Canvas - HTML5 Canvas - page 227

Copying Part of an Image to the Canvas
Thethirdsetofparametersthatcanbepassedinto drawImage() allowsustocopyanarbitrary
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
manyothernames).Thistypeoffilelayoutreferstoanimagefilethatisbrokenupphysically
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 ex-
amples.
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.