Working with the HTML5 Canvas

HTML5 has a considerable number of new features to offer. In fact, I discuss many of the new tags that HTML5 has to offer on page 228 of HTML5 Programming with JavaScript For Dummies. In fact, my book demonstrates a number of these tags as part of showing you how to use JavaScript to create applications that run anywhere and on most devices that support HTML5.

One of the more amazing (and least talked about) features of HTML5 is the concept of a canvas that you can draw on, much as an artist uses a canvas to create interesting pictures. I encountered an article about the HTML5 canvas the other day entitled, “All About HTML5 <canvas>” by Molly Holzschlag. In this article you get a great general overview of precisely what a canvas can do for you. I think you’ll find it quite useful, especially if your artistic skills are at the same level as mine are (nearly non-existent). The <canvas> tag makes it possible to create useful graphics in a way that most developers can understand quite easily.

This is one tag that I wish I had explored more fully in my book, but picking topics carefully is part of being a good author. Instead of providing an overview like the one that Molly provided, I chose to include a more specific example that also employs the Google API. My Working with Data Using Maps post describes just one method of working with the Google APIs. Chapters 18 and 20 both discuss methods of working with the Google API and the example in Chapter 20 combines the Google API with the <canvas> to create an interesting example.

If you’re working with HTML5 for the first time, make sure you spend time working with the <canvas> tag. It makes data presentation considerably easier, even if you lack artistic skills. Let me know about the projects you’ve created using the <canvas> tag at [email protected].