Introduction to the HTML5 Canvas Element

Tweet

With HTML5’s Canvas API, we’re no longer limited to drawing rectangles on our sites. We can draw anything we can imagine, all through JavaScript. This can improve the performance of our websites by avoiding the need to download images off the network. With canvas, we can draw shapes and lines, arcs and text, gradients and patterns. In addition, canvas gives us the power to manipulate pixels in images and even video.

The Canvas 2D Context spec is supported in:

  • Safari 2.0+
  • Chrome 3.0+
  • Firefox 3.0+
  • Internet Explorer 9.0+
  • Opera 10.0+
  • iOS (Mobile Safari) 1.0+
  • Android 1.0+

A Bit of Canvas History

Canvas was first developed by Apple. Since they already had a framework — Quartz 2D — for drawing in two-dimensional space, they went ahead and based many of the concepts of HTML5’s canvas on that framework. It was then adopted by Mozilla and Opera, and then standardized by the WHATWG (and subsequently picked up by the W3C, along with the rest of HTML5).

There’s some good news here. If you aspire to do development for the iPhone or iPad (referred to jointly as iOS), or for the Mac, what you learn in canvas should help you understand some of the basics concepts of Quartz 2D. If you already develop for the Mac or iOS and have worked with Quartz 2D, many canvas concepts will look very familiar to you.

Creating a canvas Element

The first step to using canvas is to add a canvas element to the page:

<canvas>
Sorry! Your browser doesn’t support Canvas.
</canvas>

The text in between the canvas tags will only be shown if the canvas element is not supported by the visitor’s browser.

Since drawing on the canvas is done using JavaScript, we’ll need a way to grab the element from the DOM. We’ll do so by giving our canvas and id:

<canvas id="myCanvas">
Sorry! Your browser doesn’t support Canvas.
</canvas>

All drawing on the canvas happens via JavaScript, so let’s make sure we’re calling a JavaScript function when our page is ready. We’ll add our jQuery document ready check to a script element at the bottom of the page:

<script>
$('document').ready(function(){
  draw();
});
</script>

The canvas element takes both a width and height attribute, which should also be set:

<canvas id="myCanvas" width="200" height="200">
Sorry! Your browser doesn’t support Canvas.
</canvas>

Finally, let’s add a border to our canvas to visually distinguish it on the page, using some CSS. Canvas has no default styling, so it’s difficult to see where it is on the page unless you give it some kind of border:

#myCanvas {
  border: dotted 2px black;
}

Now that we’ve styled it, we can actually view the canvas container on our page —Fig1 shows what it looks like.

Figure 1. An empty canvas with a dotted border

Figure 1. An empty canvas with a dotted border

Accessibility Concerns

A major downside of canvas in its current form is its lack of accessibility. The canvas doesn’t create a DOM node, is not a text-based format, and is thus essentially invisible to tools like screen readers. For example, even though we wrote text to the canvas in our last example, that text is essentially no more than a bunch of pixels, and is therefore inaccessible.

The HTML5 community is aware of these failings, and while no solution has yet been finalized, debates on how canvas could be changed to make it accessible are underway. You can read a compilation of the arguments and currently proposed solutions on the W3C’s wiki page.

This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.