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


Working with Data Using Maps

It’s hard for most people to visualize abstract data. The tables of information presented at meetings of various sorts provide information that people need, but often people don’t absorb the information because they don’t actually see it. The data doesn’t seem to have a connection to the real world. Part of the answer it so present the data as charts and graphs—making it easier to visualize the data. Unfortunately, charts and graphs have a certain level of abstractness as well, so they don’t fully perform the task of making the data. Fortunately, there are other tools in your arsenal, including maps. Creating a pictorial view of the data as it appears in context with the viewer’s surroundings often makes the data come alive. This is the reason I wrote “Using the Google Maps API to Add Cool Stuff to Your Applications.”

You can use the Google API to create data presentations that convey information that is more than the sum of the individual data components. The presentation of data as part of a map tells the viewer more than what happened, how much happened, and where it occurred. A human viewer can often see patterns that aren’t part of the data by viewing that data on a map. The right map can make it possible to understand the data in ways that the data itself doesn’t allow. For example, you might determine that most of your business occurs near crowded intersections during the 5:00 rush hour. Extending what you have learned might make it possible to optimize store locations so that more people will be able to visit during times of peak sales.

The creative presentation of data is important today because attention spans have grown ever shorter as more information sources clamor for a viewer’s attention. When you can make the data presentation interesting and also provide a means to derive more information than the information itself would tend to support, you have a winning presentation strategy. Maps provide such a strategy. Let me know your thoughts on data presentation at