Web Programming with HTML5, CSS, and JavaScript

12.2 Canvas Syntax Basics

To use canvas, you need (1) a canvas element and (2) JavaScript method calls that draw graphics objects within the canvas element’s drawing area. Here’s an example canvas element, which creates a 480-pixel by 250-pixel blank rectangular drawing area on a web page:

<body onload="rectangleExamples();">
<canvas id="canvas" width="480" height="250">
  Sorry - This page uses <code>canvas</code> and
  your browser doesn't support it.
</canvas>
</body>

After the web page loads, the onload event fires and calls the rectangleExamples function, which draws rectangle shapes inside the canvas drawing area. We’ll examine the rectangleExamples function in the next section. As you might have guessed, the canvas element’s id attribute ...