HTML5 Canvas, 2nd Edition

Hello World Animated Edition

The “Hello World” and “Guess The Letter” examples were fine, but they lacked an answer to the question “why?”—as in the question, “Why use the HTML5 Canvas at all?” Static images and text have been the realm of HTML since its inception, so why is the Canvas so different? To answer that question, we are going to create a second “Hello World” example that introduces the main feature that sets the Canvas from other methods of display in HTML: animation. In this example, we will simply fade the words “Hello World” in and out in the screen. While very simple, this is our first small step into the bigger world of the HTML5 Canvas. You can see an example of the final application in Figure 1-5.

Figure 1-5. HTML5 Canvas Animated Hello World