Before you can begin drawing on the canvas, you must declare a canvas element, along with its identifier and dimensions. This process serves three purposes. First, it allows you easy access to the element in JavaScript. Second, it enables you to define the canvas pixel area size using the height and width properties. Third, it enables you to define fallback content that will be displayed on non–Canvas API web browsers:

<canvas id='surface' width='500' height='500'>
   <img src='static-image.jpg'>

The id attribute is optional, but it does make locating this particular canvas element easier, especially if you have multiple canvases on the same page. If you know the absolute height and width values, specify them ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.