HTML and CSS Reference
Using Canvas to Create Online Ads
ONE OF THE most important new features of HTML5 is the new Canvas API ( Application Programming In-
API to do many tasks, including creating diagrams, charts, graphs, animations, advertisements, and interactive draw-
ing 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 down-
load 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 width="600" height="150" id="adCanvas"></canvas>
Your <canvas> element should also have an id attribute. The ID that you set here will be used to get a reference to
The advertisement that you will be creating is separate from your existing Joe's Pizza Co. website, and so you will
want to create a new folder for the files used in this mini-project.