HTML5 Guidelines for Web Developers

136 Chapter 5—Canvas

context.drawImage(image, dx, dy)

context.drawImage(image, dx, dy, dw, dh)

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

In all three cases we need an image, canvas, or video element in the first parameter,

which can be dynamically integrated via JavaScript or statically in the HTML code.

Animated pictures or videos are not rendered in animation but displayed statically

as the first frame or a poster frame if present.

All other arguments of the method drawImage() affect position, size, or cropping

the source image to render in the target canvas. Figure 5.21 shows the graphic

interpretation of the possible position parameters; the prefix s stands for source

and d for destination.

Figure 5.21 Position parameters of the “drawImage()” method

Let’s now compare the individual drawImage() methods using three simple ex-

amples. The common setup is a picture measuring 1200 × 800 pixels, created

dynamically as a JavaScript object (see Figure 5.22):

var image = new Image();

image.src = 'images/yosemite.jpg';