246996016-HTML5-Step-by-Step

288 Chapter 16
You add a canvas element to a Web page with the aptly titled tag. Like other
HTML tags, the tag accepts attributes, the most basic of which are the pixel
height and width of the canvas on the page. The code to create a 200 × 200 pixel canvas
looks like this:
Here’s the syntax for an entire page with the 200 × 200 canvas inside:
Canvas
This HTML creates a canvas on the page that is ready for content. But wait! What advantage
does a canvas element provide on a page? How do you make a cool animated clock
or menu or other widget? Alas, therein lies the problem. When simply included in a page
like the one shown, a tag doesn’t do anything. In fact, it’s just blank; go ahead
and load that code into a canvas-compatible browser (Internet Explorer 9, Firefox 1.5 or
newer, Safari, and so on). The page is blank.
So, how might you get the canvas to do something? The answer lies in the programming
language that all modern browsers understand: JavaScript. You bring the canvas element
to life with JavaScript; everything within the canvas is drawn, animated, and destroyed
with JavaScript.
You might not know much, if anything, about JavaScript. However, the information in this
chapter will give you an introduction. After learning a bit about JavaScript you’ll be able
to make the canvas element do some fun and interesting things!
JavaScript, Briefly
JavaScript is not Java; it bears no relation to the Java programming language, the drink,
or the country. JavaScript is a programming language that is used primarily to provide
additional functionality to Web pages and applications, and it’s used heavily in the “Web
2.0” paradigm of highly interactive Web sites.