Skip to Main Content
HTML5: Up and Running
book

HTML5: Up and Running

by Mark Pilgrim
August 2010
Intermediate to advanced content levelIntermediate to advanced
222 pages
7h 12m
English
O'Reilly Media, Inc.
Content preview from HTML5: Up and Running

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.

Cat with an <img> element

Figure 4-12. Cat with an <img> element

Figure 4-13 shows the same cat, drawn on a canvas.

Cat with a <canvas> element

Figure 4-13. Cat with a <canvas> element

The canvas drawing context defines several methods for drawing an image on a canvas:

  • drawImage(image, dx, dy) takes an image and draws it on the canvas. The given coordinates (dx, dy) will be the upper-left corner of the image. Coordinates (0, 0) would draw the image at the upper-left corner of the canvas.

  • drawImage(image, dx, dy, dw, dh) takes an image, scales it to a width of dw and a height of dh, and draws it on the canvas at coordinates (dx, dy).

  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, clips it to the rectangle (sx, sy, sw, sh), scales it to dimensions (dw, dh), and draws it on the canvas at coordinates (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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

HTML5 in Action

HTML5 in Action

Greg Wanish, Rob Crowther, Joe Lennon, Charles Brindle
HTML5 Cookbook

HTML5 Cookbook

Christopher Schmitt, Kyle Simpson
AngularJS

AngularJS

Shyam Seshadri, Brad Green

Publisher Resources

ISBN: 9781449392154Errata Page