HTML and CSS Reference
In-Depth Information
}
9.
Save the
adscript.js
file.
You're now at the moment of truth. Open your
advert.html
file in your web browser and take a look at your fin-
ished advertisement. If all is well, it should look like the one in Figure 14-17.
Pizza image reproduced by permission of iStockphoto.com/Lauri Patterson
Figure 14-17
The finished HTML5 Canvas advertisement.
To distribute the advertisement on partner websites, you need to send the JavaScript file (
adscript.js
) and the
two images (
fallback.png
and
background.png
) to the websites' developers. The developers on the other
end would then need to add the
<canvas>
element onto the websites where they want the advertisement to appear.
If you want to be really helpful, you could create a text file called README with some instructions for the other
websites' developers to follow.
Summary
In this chapter, you have learned about one of the biggest new features in HTML5, the Canvas API. You've used this
API to generate an online advertisement using just JavaScript and a few images. The beauty of being able to use
JavaScript to draw in the browser is that you can create your graphics on the fly, maybe even using real-time data
from some of the other new APIs (like GeoLocation) to personalize these graphics.
The Canvas API is massive and there's a lot of stuff that I could not cover in this chapter, including cool things like
animation. If you are interested in learning more about the Canvas API, I recommend that you check out the deve-
loper docs on the Mozilla Developer Network (
https://developer.mozilla.org/en-US/docs/HTML/
Canvas
)
. The site has loads of great information and tutorials that dive deeper into the inner workings of the Can-
vas API.
The end of this chapter also brings the Joe's Pizza Co. project to a close. In just a few hundred pages, you have man-
aged to build a website using technologies that even many professional website designers are only just beginning to
understand. Through the course of this topic, you have learned two new languages, the HTML markup language and
the programming language JavaScript. Combined with CSS, these three languages make up the backbone of front-
end development for the modern-day web. Whether you want to freelance, join a studio, or design websites as a
hobby, you now have the foundation you need to go out and build some really awesome websites.
Every day, I wake up and feel privileged to work in an industry that is truly making the world a better place. The
web industry is one of the most exciting places to work right now. So much is evolving that it is completely possible
