DECLARE A CANVAS ELEMENT

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'>
</canvas>

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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.