(BQ) Part 1 book "Introducing HTML 5" has contents: Canvas basics, drawing paths, capturing images, pushing pixels, animating your canvas paintings, storage options, web SQL databases, the cache manifest, how to serve the manifest,.and other contents. | CHAPTER 5 Canvas Remy Sharp IF THE VIDEO element is the poster boy of HTML5, the canvas element is definitely the Han Solo of HTML5. It’s one of the larger parts of the HTML5 specification, and in fact the canvas API, the 2D drawing context, has been split into a separate document, though the canvas element itself is still part of the official HTML5 spec. The canvas element provides an API for 2D drawing— lines, fills, images, text, and so on. If you think back to the days of the version of MS Paint that came with Windows 95, you can imagine some of the functionality. In fact, Paint has been replicated using the canvas element, as shown in Figure . Drawing applications that aim to become fully fledged vector drawing applications are starting to pop up all over the web (Figure ). As these applications are based on Open Web technology, they work in a browser on more devices, too. The Harmony application shown in Figure even works on mobile devices, including the iPhone and Android phones. Download from 116 I NTRO DU CI NG H TM L 5 FIGURE MS Paint replicated using the canvas element. FIGURE More-advanced drawing applications are emerging using canvas. Download from C H A P T ER 5 : CA NVAS : 117 FIGURE The canvas drawing demo Harmony also works, unmodified, on mobile browsers. The API has already been used for a huge range of applications, including (interactive) backgrounds to websites, navigation elements, graphing tools, fully fledged applications, and games and emulators. Who knew Super Mario canvas–based games would open the eyes of so many developers! The 2D API is large enough that I suspect we’ll see entire books dedicated to the subject. Since I have only one chapter to talk about it, I’ll show you the basics. But I’ll also show you some of the funky stuff you can do with the canvas element, like capturing frames from a video or processing individual pixels from an image inside the canvas. I’ll .
