The Modern Web

The canvas Element

The canvas element is so named because, like a blank canvas, it’s there to be drawn on. The drawing is done with JavaScript using a dedicated API, creating a tailor-made bitmap graphic. And it really is like a painter’s canvas in that once you’ve drawn on it, you can’t then manipulate the things you’ve drawn. They are not objects like SVG elements, just pixels on the screen; you can only draw over them.

The basic setup is incredibly simple: Add a canvas element to your markup—perhaps with a unique id that will make it a little easier to reference—with size attributes and fallback content for browsers that don’t support canvas (or JavaScript):

<canvas id="canvas" height="400" width="800"> <p>Sorry, your browser doesn’t support ...