HTML5 Canvas Introduction

Friday, October 19, 2012


The <canvas> element in HTML5 can be used to draw graphics using client-side scripting, typically JavaScript. You can use the canvas element, for instance, to draw graphs, or animations. Using the canvas element is easy, but you do need a basic understanding of HTML and JavaScript.

Support for Canvas

Not all modern browser support the canvas element, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9. Your browser was detected as and this browser does support the canvas element.

Begin with the Canvas

The canvas element represents a rectangular area on an HTML page. When using the canvas element, the first thing you need to do is add the tag to your HTML5 document:

<canvas id="myCanvas" width="300" height="200"></canvas>

With the canvas element, you will always want to specify an id attribute because you will reference it from your javascript code. In addition, specify width and height attributes to define the size of the canvas. You can style the canvas element, and have more than one in your document.

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" ></canvas>

What do you do if the browser does not support the canvas element? There are a few options. An easy approach is to place alternative content inside the canvas tags. For example:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" >
  <span>Sorry, the example could not be displayed.  Your browser does not support the canvas element.</span>


Your browser does not support the HTML5 canvas tag.

You can place text, an image element, or whatever HTML content you need to display if the canvas tag is not supported. If the browser supports the canvas tag, the contents inside will be ignored. If the browser does not support the canvas tag, the contents will be displayed. An alternative to this approach is to test the browser for this feature ability using JavaScript. For example, you can create a function that tests for the ability to create a canvas element. Then, based on the results, you can take specific actions. Here is an example regarding how to check for canvas support using JavaScript. In the following example, we use a conditional statement, to test for support.

if (!isCanvasSupported()){ .. not supported so do something ... }
function isCanvasSupported() {
   var elem = document.createElement('canvas');
   return !!(elem.getContext && elem.getContext('2d'));

Draw Onto the Canvas

To draw onto the canvas, we will need the assistance of JavaScript.

  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FFAA00";
  ctx.fillRect(75, 50, 150, 100);


Your browser does not support the HTML5 canvas tag.

Canvas Coordinates

The canvas is a two dimensional grid. The upper-left corner of the canvas has a coordinate of (0,0). In the previous example, we use the fillRect property and instructed the browser to start the the X coordinate of 75 and the Y coordinate of 50, then move 150 pixels to the left on X and down 100 pixels on Y, then fill the rectangle with a solid color.

In the upcoming articles in this series, we will cover more advanced techiques used to draw graphics onto the canvas element. You will learn how to draw lines, circles, rectangles, apply styles, shadows, text, and apply transformations.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Head First HTML5 Programming: Building Web Apps with JavaScript HTML CSS and JavaScript HTML5: The Missing Manual