Cover by Matthew West

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

chapter fourteen

Using Canvas to Create Online Ads

html5_badge.psd  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.

9781118432693-fg1401.tif

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 ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required