HTML5 Foundations

chapter fourteen

Using Canvas to Create Online Ads

  One of the most important new features of HTML5 is the new Canvas API (Application Programming Interface). The Canvas API allows you to programmatically draw graphics using JavaScript. You can use the Canvas API to do many tasks, including creating diagrams, charts, graphs, animations, advertisements, and interactive drawing applications. Using Canvas instead of regular images can also help to reduce the time it takes for your web pages to load. Why, you ask? Because the browser does not have to issue HTTP requests to fetch image files and then download those files.

In this chapter, you use the Canvas API to create an online advertisement for Joe’s Pizza Co. (see Figure 14-1). This advertisement would be placed on other websites to help raise awareness of the Joe’s Pizza Co. brand and hopefully encourage more customers to eat at Joe’s.

Pizza image reproduced by permission of iStockphoto.com/Lauri Patterson

Figure 14-1 The advertisement you are going to create.

Setting Up Your Canvas

To create a canvas, you use the <canvas> element. The default size of a canvas is 300 pixels wide and 150 pixels high. You can, however, change these default dimensions by adding height and width attributes to the <canvas> element, like so:

<canvas ...