Peter Lubbers - Pro HTML 5 Programming

30
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Adding a Canvas to a Page
Adding a canvas element in an HTML page is pretty straight-forward. Listing 2-4 shows the canvas
element that can be added to an HTML page.
Listing 2-4. The canvas element
The resulting canvas will show up as an “invisible” 200 × 200 pixel rectangle on your page. If you
want to add a border around it, you could use the HTML code shown in Listing 2-5 to style the canvas
with normal CSS borders.
Listing 2-5. Canvas element with a solid border
Note the addition of the ID diagonal to make it easy to locate this canvas element programmatically.
An ID attribute is crucial to any canvas because all the useful operations on this element must be done
through scripting. Without an ID, you will have difficulty locating the element to interoperate with it.
Figure 2-2 shows what the canvas in Listing 2-5 would look like in a browser.
Figure 2-2. A simple HTML5 canvas element on an HTML page
Not very exciting, but as any artist would tell you, it is full of potential. Now, let’s do something with
this pristine canvas. As mentioned before, it is not easy to draw a diagonal line on a web page without
HTML5 Canvas. Let’s see how easy it is now that we can use Canvas. Listing 2-6 shows how, with just a
few lines of code, you can draw a diagonal line on the canvas we added to the page earlier.