HTML and CSS Reference
In-Depth Information
chapter
fourteen
Using Canvas to Create Online Ads
ONE OF THE
most important new features of HTML5 is the new Canvas API (
Application Programming In-
terface
). 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 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 canvas in your JavaScript code.
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.
