Chapter 4. Canvas
This chapter covers
- Building graphics into web applications using HTML Canvas
- Working with text, lines, shapes, and images on Canvas
- Animating elements in Canvas
The Canvas API is new in HTML5, and it provides a means of drawing bitmap-based images inside the browser. Canvas has received a lot of media and developer attention because it is, in fact, a blank canvas upon which anyone can draw practically any visual element. In addition, because the canvas element is an HTML element like any other, it can be addressed in JavaScript as a regular element and participate in page flow and styling. Games are currently the most common use for Canvas, but any kind of image editing or drawing program could also be built using this API.
Ensuring cohesion between your page and a canvas element isn’t exactly a stroll down Easy Street though. Drawing on the canvas is only possible using JavaScript, and canvas styling is only available for the entire element, not the pixels you draw onto it, which means that your meticulously designed CSS will have no effect on presentation inside a <canvas> element. In other words, if your site uses Canvas to present islands of content rather than as a full-screen presentation tool, you’ll have to replicate the styling you created in CSS using JavaScript.