Chapter 5: Canvas
This page shows all examples, graphics and links used in this chapter of HTML5: Guidelines for Web Developers. The first table lists examples and graphics with the relevant page numbers in the book, includes links (where applicable) to the online version of that page plus information on browser compatibility, and shows a preview of the figure in the book. Click on this preview to load the figure in original size in JPEG format. The second table lists all URLs which appear in the book on the relevant pages. If you would like to leave feedback or report any errors and bugs, please use the e-mail contact above.
| page | example / figure | screenshot |
|---|---|---|
| 105 | Figure 5.1 Two overlapping rectangles created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 106 | Figure 5.2 Bar chart with ten horizontal bars created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 107 | Figure 5.3 The Canvas coordinate system created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (axis labels missing, layout error for y) |  |
| 115 | Figure 5.4 Linear gradient with four colors created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (layout error for red) |  |
| 116 | Figure 5.5 Components of a radial gradient created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (layout error for rgba) |  |
| 118 | Figure 5.6 The letter A as a path created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (axis labels missing) |  |
| 119 | Figure 5.7 The path method “lineTo()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 120 | Figure 5.8 The path method “quadraticCurveTo()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 121 | Figure 5.9 The path method “bezierCurveTo()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 122 | Figure 5.10 The path method “arcTo()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6 (method arcTo() not correctly implemented), Chrome 6, Safari 5, IE 9b |  |
| 123 | Figure 5.11 Four different rectangles with rounded corners; the circle is an extreme example of a rounded rectangle created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6 (method arcTo() not correctly implemented), Chrome 6, Safari 5, IE 9b (method arcTo() not correctly implemented) |  |
| 124 | Figure 5.12 The path method “arc()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 126 | Figure 5.13 Circles and sectors created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 127 | Figure 5.14 The path method “rect()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 128 | Figure 5.15 Attributes for determining line styles created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (layout error for context.lineWidth) |  |
| 129 | Figure 5.16 The non-zero fi ll rule for paths created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (nonzero rule not correctly implemented), Safari 5, IE 9b |  |
| 132 | Figure 5.17 Font formatting with the “font” attribute created with: Firefox 3.6 tested with: Firefox 3.6 (wrong font for small-caps), Opera 10.6 (wrong font for small-caps), Chrome 6 (font sizes specified with font-size in % are too small; @font-face not supported), Safari 5 (font sizes specified with font-size in % are too small; @font-face not supported), IE 9b (wrong font for small-caps) |  |
| 133 | Figure 5.18 Horizontal anchor points with “textAlign” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (punctuation mark not on the left for document.dir=rtl), Safari 5 (punctuation mark not on the left for document.dir=rtl), IE 9b (text not displayed) |  |
| 134 | Figure 5.19 Vertical anchor points with “textBaseline” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 135 | Figure 5.20 “fi llText()”, “strokeText()”, and “measureText()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (maxLength not implemented), Safari 5 (maxLength not implemented), IE 9b |  |
| 136 | Figure 5.21 Position parameters of the “drawImage()” method created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (layout error for image) |  |
| 137 | Figure 5.22 The source image of all “drawImage()” examples created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (wrong shadows for strokeRect - rectangle has transparent white fill), Safari 5, IE 9b (layout error for vertical texts, text 1200 and 600 missing) |  |
| 138 | Figure 5.23 Taft Point in Yosemite National Park created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 139 | Figure 5.24 Taft Point with El Capitan in Yosemite National Park created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 140 | Figure 5.25 Yosemite National Park postcard created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 141 | Figure 5.26 Yosemite National Park postcard (alternative layout) created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 142 | Figure 5.27 The “ImageData” object created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (layout errors for vertical text and rgba values) |  |
| 144 | Figure 5.28 Modifying colors in the “CanvasPixelArray” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 146 | Figure 5.29 Color manipulation with “getImageData()” and “putImageData()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6 (method createImageData() not implemented), Chrome 6 (method createImageData() not implemented), Safari 5, IE 9b |  |
| 149 | Figure 5.30 Values of the “globalCompositeOperation” attribute created with: Firefox 4.0b tested with: Firefox 4.0b, Opera 10.6, Chrome 6 (source-in, source-out, destination-in, destination-atop and copy are wrong), Safari 5 (source-in, source-out, destination-in, destination-atop and copy are wrong) |  |
| 151 | Figure 5.31 Compositing operation “destination-in” with image and text created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6 (rendering wrong), Chrome 6 (destination-in not implemented correctly, maxLength wrong for subtitle), Safari 5 (destination-in not implemented correctly, maxLength wrong for subtitle) |  |
| 152 | Figure 5.32 Compositing operation “lighter” with 16 base colors created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5 |  |
| 153 | Figure 5.33 Checkered pattern in eight color combinations created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (createPattern() with Canvas not implemented correctly), Safari 5, IE 9b |  |
| 154 | Figure 5.34 Pattern using images as a source created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6 (wrong patterns in legend), Safari 5, IE 9b |  |
| 156 | Figure 5.35 The basic transformations “scale()”, “rotate()”, and “translate()” created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 157 | Figure 5.36 Rotate, scale and move created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 7, Safari 5, IE 9b |  |
| 160 | Figure 5.37 Photo collage with mirror effect in pseudo-3D created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (shadows wrong due to missing composite) |  |
| 167 | Figure 5.38 Animation with multicolored spheres created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 169 | Figure 5.39 HSL colors for multicolored spheres animation created with: Firefox 3.6 tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 170 | Figure 5.40 Yosemite National Park video postcard created with: Firefox 4.0b tested with: Firefox 4.0b (wrong background at restart), Opera 10.6 (wrong background at restart), Chrome 6 (wrong background at restart) |  |