Chapter 9. Advanced Canvas: Interactivity and Animation
The canvas is a huge, sprawling feature. In the previous chapter, you learned how to draw line art and even create a respectable drawing program in a few dozen lines of JavaScript. But the canvas has more up its sleeve than that. Not only can it show dynamic pictures and host paint programs, but it can also play animations, process images with pixel-perfect control, and run interactive games. In this chapter, youâll learn the practical beginnings for all these tasks.
First, youâll start by looking at drawing context methods that let you paint different types of content on a canvas, including images and text. Next, youâll learn how to add some graphical pizzazz with shadows, patterned fills, and gradients. Finally, youâll learn practical techniques to make your canvas interactive and to host live animations. Best of all, you can build all of these examples with nothing more than ordinary JavaScript and raw ambition.
Note
For the first half of this chapter, youâll focus on small snippets of drawing code. You can incorporate this code into your own pages, but youâll need to first add a <canvas>
element to your page and create a drawing context, as you learned on Getting Started with the Canvas. In the second half of this chapter, youâll look at much more ambitious examples. Although youâll see most (or all) of the canvas-drawing code that these examples use, you wonât get every page detail. To try out the examples ...
Get HTML5: The Missing Manual, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.