Images
IE[a] | Firefox | Safari | Chrome | Opera | iPhone | Android |
|---|---|---|---|---|---|---|
7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
[a] Internet Explorer support requires the third-party explorercanvas library. | ||||||
Figure 4-12 shows an image of a cat displayed with the <img> element.

Figure 4-12. Cat with an <img> element
Figure 4-13 shows the same cat, drawn on a canvas.

Figure 4-13. Cat with a <canvas> element
The canvas drawing context defines several methods for drawing an image on a canvas:
drawImage(takes an image and draws it on the canvas. The given coordinatesimage,dx,dy)(will be the upper-left corner of the image. Coordinatesdx,dy)(0, 0)would draw the image at the upper-left corner of the canvas.drawImage(takes an image, scales it to a width ofimage,dx,dy,dw,dh)and a height ofdw, and draws it on the canvas at coordinatesdh(.dx,dy)drawImage(takes an image, clips it to the rectangleimage,sx,sy,sw,sh,dx,dy,dw,dh)(, scales it to dimensionssx,sy,sw,sh)(, and draws it on the canvas at coordinatesdw,dh)(.dx,dy)
The HTML5 specification explains the drawImage()
parameters:
The source rectangle is the rectangle [within the source image] whose corners are the four points
(,sx,sy)(,sx+sw,sy)(,sx+sw,sy+sh)(sx, sy+sh).The destination rectangle is the rectangle [within the canvas] whose corners are the four points ...