HTML <canvas> element

The <canvas> element provides a bitmap drawing surface for scripts. By itself, it is only a blank canvas. JavaScript draws into it using a rendering context.

This makes <canvas> different from ordinary HTML elements. A paragraph contains text. An image points to an image file. A canvas is more like a programmable drawing board that the page can paint on while it runs.

Common uses include graphs, games, visual experiments, drawing tools, image manipulation, animation, simulations, and custom visual interfaces. The browser gives the surface; the script supplies the drawing instructions.

The width and height attributes set the size of the drawing surface in coordinate pixels. CSS can also resize the displayed box, but that is not the same as changing the internal drawing size. Confusing those two sizes can make drawings look stretched or blurred.

Fallback content can be placed inside <canvas>. Browsers that support canvas normally do not show it. It is still useful to include plain text or a fallback explanation for situations where the drawing surface cannot be used.

The canvas itself does not carry the semantics of what has been drawn. If the drawing contains important information, the page may need surrounding text, fallback content, or another accessible route to the same meaning.

Attributes: width, height, GLOBALS.

Typical layout:
<canvas id="graph" width="300" height="150">
  A simple graph would appear here.
</canvas>

Visual representation: