40
66 HTML5 NOw
var c = canvas.getContext(“2d”);
c.fillStyle = “rgb(171,213,16)”;
c.fillRect(32, 32, 96, 96);
c.fillStyle = “rgba(255,0,102,0.75)”;
c.fillRect(64, 64, 96, 96);
c.fillStyle = “rgba(0,0,255,0.5)”;
c.fillRect(96, 96, 96, 96);
}
}
</script>
<body onload=”draw();”>
<canvas id=”c1” width=”128” height=”128”>
three overlapping squares.
</canvas>
</body>
Numerous JavaScript drawing commands exist for the
<canvas>
element to per-
form all the usual graphics primitives, drawing and/or filling lines, paths, circles,
arbitrary polygons, etc. To learn more I recommend the Mozilla Developer
Center online canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial.
brOWSer SuppOrT
As with any graphical element, you must make sure to provide good fallback
content for browsers that don’t support
<canvas>
, for text browsers, for acces-
sibility, and of course, for search engines.
I recommend that you limit your use of
<canvas>
on production web sites to
decorative images only. This way, you can provide reasonably equivalent fall-
back content — for example by nesting an
<img>
element with
alt
text.
<canvas id=”c1” width=”128” height=”128”>
<img src=”3squares.png” alt=”three overlapping squares”>
</canvas>