An Etch-a-Sketch with a drawing
Part of the The Canvas API Reading List

Canvas is one of the most powerful features of HTML5, but also (in my experience) one of the most easily misunderstood. Before embarking on a fresh series about what the HTML5 Canvas API can achieve, I thought it might be helpful to explain just what it is, and what it’s not.

I’ve called canvas “the world’s fastest Etch-a-Sketch”. It is an arbitrary drawing space on a web page, defined by a <canvas> element. This space can be filled, very quickly, with pixel information, via . The HTML5 element by itself does nothing, other than setting the stage: 

<canvas id="sketch">
</canvas>

We can style this <canvas> space: 

#sketch {
	width: 100%; min-height: 22%;
	border: 1px solid red;
}

But again, the result isn’t much:

To draw on the canvas area, we must use JavaScript to identify the element, determine the “context” of our drawing, and draw using an appropriate method. Added to the end of the page, in a <script>, a very simple example: 

var etchasketch = document.getElementById("sketch"),
drawspace = etchasketch.getContext("2d");
drawspace.fillRect(0,0,150,100);

Which produces:

What’s The Difference Between canvas And SVG?

Canvas is sometimes confused with SVG, possibly because both technologies allow web developers to draw on pages. However, the two differ markedly:

  • Canvas is resolution dependent: that is, canvas drawings are based upon pixels, not vector shapes.
  • SVG is written as markup; canvas is created solely in JavaScript.
  • Canvas animation might be compared to that “Etch-A-Sketch”: to draw a new animation frame, the <canvas> area is wiped clean and a new frame drawn in. SVG, on the other hand, moves DOM elements as individual addressable shapes to create animation.

A good part of what makes canvas so powerful is the speed of modern JavaScript, which is able to draw pixels inside the <canvas> space very quickly, far faster than the human eye can follow. This makes canvas very useful for real-time applications like games, image manipulation, and interactive data visualization.

Crossovers

You’ll find that the HTML5 Canvas API - the specification that controls how <canvas> and it’s associated JavaScript works - crosses over with other web technologies:

  • canvas implements gradients, transforms and blend modes, just as CSS does.
  • like SVG, it has stroke and fill styles for its drawings, and can also create paths.

These similarities can get confusing; the important thing to remember is that canvas implements each of these in its own way, in the <canvas> context, using JavaScript, on a pixel-by-pixel basis.

Browser Support

<canvas> has broad support in all browsers: IE9 and all modern browsers support the basic API.

Accessibility

As a method of drawing arbitrary pixels on the screen, canvas has some real challenges in accessibility. The basic approach is to provide a fallback description, in markup, in the element itself: 

<canvas id="sketch">
    <p>A black rectangle.</p>
</canvas>

This inner text won’t be rendered by any browser that supports <canvas>, but will be read by accessibility devices and software. Other browsers will render the <canvas> element as normal.

There’s much more we can do with accessibility and <canvas>, especially when it comes to interaction - as well as with the Canvas API itself, of course - but that will be in future articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.