Working with the HTML5 canvas in web projects

The HTML5 canvas is an interesting feature of this increasingly widespread web standard. With it you can draw dynamic content to any web page and add features like drawing tools, animation and graphic effects, and interactivity to your websites.

This article gives you an overview of the HTML5 canvas, along with a handful of examples to get you started. The animated banner sample in Figure 1 shows an application of the key concepts that I cover.

Figure 1. An animated banner built with EaselJS and the HTML5 canvas

Before you get started, download and install Adobe Dreamweaver CS6 from Adobe Creative Cloud if you haven’t already done so. Then download the supplied files to use as a reference.

What is the HTML5 canvas?

Figure 2. The coordinate space of the canvas starting at 0, 0 in the upper left corner

The HTML5 canvas is an invisible 2D grid that you can use to draw graphics and animations (see Figure 2). Any number of canvases can be added to an HTML page using the <canvas> tag.

The canvas tag itself is very simple. It defines an invisible resolution-dependent coordinate space at a given width and height. The coordinates run along two axes (x and y) starting at 0, 0 in the upper left corner.

The canvas has no drawing abilities of its own; you use JavaScript to reference a context within the canvas. Once you reference the canvas’ context, you can work with its commands to draw shapes, text, images, and video to the canvas. In most cases you’ll reference the context 2D object, although there are experimental implementations available for a context 3D object that is outside the scope of this article.

The following shows an HTML page that defines a canvas along with the JavaScript that retrieves the context and draws a rectangle:

<!DOCTYPE html>
<html>
<title>Canvas sample</title>
</html>
<body>
<canvas id="myCanvas" width="420" height="320"></canvas>
<script>var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext('2d'); 
context.fillStyle = "rgb(0,0,0)"; 
context.fillRect(10, 10, 400, 300); 
</script>
</body>
</html>

The fillStyle line sets the color to black. The fillRect line renders the rectangle at a size of 400×300 pixels placed at 10 x, 10 y in the coordinate space.

What can you do with the HTML5 canvas?

The canvas is all about drawing. You can use the context 2D application programming interface (API) to draw shapes, create image and video effects using drawImage, and transform and composite graphics for special effects. And that’s just the foundation. By combining the drawing abilities of the canvas with the power of JavaScript, you can create simple or complex animations, graphs and charts, and even highly interactive content like games and simulations.

The following is a quick summary of canvas features:

  • Draw shapes on the fly: lines, paths, and arcs; Bézier curves and quadratic curves; rectangles
  • Apply custom strokes and fills to your shapes: stroke color, stroke width, cap, join, miter limit; fill color, linear and radial gradients fills, pattern fills
  • Draw canvas text: font (CSS format), text align, and text baseline
  • Create special effects: images, video, and other canvases using drawImage
  • Add shadows to graphics: shadow color, offset, and blur
  • Composite overlapping images: composite modes and clipping paths
  • Transform graphics: translate (move), rotate, scale, and skew

Check out the Mozilla Developers Network Canvas Tutorial for a detailed review of HTML5 canvas features.

How does the HTML5 canvas relate to web standards?

The canvas tag is an element in the HTML document object model (DOM) and therefore can be treated like any other element. JavaScript can interact with it directly and CSS transformations can be applied to it for additional effects. And perhaps most importantly, you can view graphic effects and animations created on the canvas on any device supporting the HTML5 canvas standard. That means your content can be seen across all screens without the need for a plug-in.

The canvas also has the benefit of being supported by public JavaScript libraries (EaselJSKineticsJS, and Cake to name a few) that simplify many common production tasks. In the samples that follow, I focus on working with EaselJS since it was designed to make the canvas workflow similar to working in ActionScript 3.

The canvas tag is supported by Microsoft Internet Explorer 9, Mozilla Firefox, Opera, Google Chrome, and Apple Safari, iOS Safari, Android, and BlackBerry. Opera Mini partially supports the canvas.

Note: For the latest compatibility information, always check the CanIUse website.

Working with the HTML5 canvas in Dreamweaver

These examples can help you get started with the canvas and EaselJS. After you use Dreamweaver to create your web page, insert a canvas tag and add any amount of JavaScript to create simple or complex content.

Follow these steps to set up a canvas and initialize it with EaselJS:

  1. Open Dreamweaver and choose File > New to create a new file. In the New Document dialog box, select the HTML5 option from the DocType menu on the right (see Figure 3) and click the Create button.
    Figure 3. Creating an HTML5 document in Dreamweaver (click to enlarge)
  2. Switch to the Code view and add the link to the EaselJS library in the head tag. Your code should look like this:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Canvas Sample</title>
    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    </head>
    <body>
    </body>
    </html>
  3. In the body tag, add a canvas tag with the following attributes:
    • id: myCanvas
    • width: 500
    • height: 45
    <body>
    <canvas id="myCanvas" width="500" height="450"></canvas>
    </body>
  4. Below the canvas tag, add a script tag with the following JavaScript:
    <body>
    <canvas id="myCanvas" width="500" height="450"></canvas>
    <script> 
    // 1. Create a stage to draw on using the canvas 
    var stage = new createjs.Stage("myCanvas"); 
    // 2. Create a circle shape 
    var circle = new createjs.Shape(); 
    circle.graphics.beginFill("blue").drawCircle(250,50,50); 
    // 3. Add the circle to the stage 
    stage.addChild(circle); 
    stage.update();
    </script>
    </body>
  5. Save the file and preview it in a browser. You should see a blue circle in the upper center of the canvas (see Figure 4). Check out example1.html in the supplied files to examine the working sample file too. While working in Dreamweaver, you can click the Live button to see the canvas rendered in the Design view.
    Figure 4. The circle rendered in the canvas coordinate space

Notice that in the first bit of code, you added the script block containing the JavaScript after the canvas tag. Placing your code at the bottom, just before the closing </body> tag, ensures that the canvas is loaded in the DOM before you try to manipulate it. It’s a good practice to wait for all the elements on the page to load before running your JavaScript routines, so placing your code here is an easy way to make sure you don’t run into any timing problems.

The JavaScript code you added is simple. It creates a stage object to draw on and then creates a new shape named “circle.” The code references the graphics property of the circle, sets the color fill to blue, and creates a circle that’s 50 pixels wide at 250 x, 50 y in the stage’s coordinate space. The last two lines add the circle to the stage and call the stage’s update method so you can view the shape.

Circles aren’t all that you could draw. You can draw different types of shapes by replacing the drawCircle method with the drawEllipsedrawPolyStardrawRect, or drawRoundedRectmethods. See the EaselJS Graphics Class documentation for more information.

Adding interactivity to the HTML5 canvas object

Follow these steps to make the circle interactive using an event:

  1. Return to the Code view in Dreamweaver.
  2. Add the following code in the script tag after the line that defines the circle:
    circle.graphics.beginFill("blue").drawCircle(250,50,50); 
    circle.addEventListener("click", handleCircleClick); 
    // Respond to clicks on the circle function 
    handleCircleClick(e){ alert("You clicked on the circle..."); } 
    createjs.Touch.enable(stage);
  3. Save the file and preview it in a browser. Click the circle to see the alert dialog box pop up (click the circle in Figure 5 to see the result). Check out example2.html in the supplied files to examine the working sample file.
    Figure 5. Circle made interactive using an event

Interactivity is driven by events. All shapes support mouse and touch events, including hover, press, and release. Working with events requires two steps: creating a function that will be called when the event is triggered and then using the addEventListener method to assign the event handler function to watch for that specific event on a particular element.

In this case, the handleCircleClick function responds to click events on the circle. Note that you can enable greater support for touch events using the EaselJS Touch object as seen in the last line in the sample above. See the EaselJS MouseEvent and Touch Class documentation for more information.

Animating the HTML5 canvas object

Follow these steps to animate the circle:

  1. Return to the Code view in Dreamweaver.
  2. Add the following code as the last lines in the script tag:
    // 4. Animate the circle using the Ticker 
    createjs.Ticker.setFPS(60); 
    createjs.Ticker.addEventListener("tick", handleInterval); 
    // Respond to the tick event function 
    handleInterval(){ circle.y += 5; if( circle.y >= 450 ){ circle.y = -50; } 
    stage.update(); }
  3. Save the file and preview it in a browser. Notice that the circle animates downward until it leaves the screen, then reappears at the top of the screen to continue the loop. Even though the circle is animated, it still responds to the click event (click the animated circle in Figure 6 to see the result). Also check out example3.html in the supplied files to examine the working sample file.

    Figure 6. The animated circle (top); animation shown paused during a click on the circle (bottom).

EaselJS provides an interval for animation called the Ticker. To use the Ticker, you add an event handler function that listens to the tick event, write your code inside the event handler, and call the stage’s update function to update the view. See the EaselJS Ticker documentation for more information.

Where to go from here

These examples cover the key concepts of setting up a canvas and EaselJS, drawing shapes, adding events to add interactivity, and using the Ticker to animate graphics on an interval. Take a look at the supplied files to deconstruct the working examples. And be sure to check out the animated banner sample (Figure 1 at the beginning of the article) that I included with the sample files as a more advanced scenario for you to review. The banner example takes these concepts a few steps further including adding and removing circles and animating with TweenJS.

Although working with the canvas is a really fun part of HTML5, be aware that you may encounter some pitfalls:

    • Include the standards mode document type declaration <!DOCTYPE html> at the top of your HTML page for support in Internet Explorer 9.
    • While the HTML5 standard does not require it, always include a closing canvas tag (</canvas>) for support across all browsers including Firefox and Internet Explorer.
    • Older browsers, most notably Internet Explorer 8, do not support the canvas tag. You can place an img tag, or other content, inside the nested canvas tags to provide fallback content for browsers without canvas support.
    • Performance during complex animations may become an issue. Consider using multiple canvases for complex compositions to ensure that you update as little of the drawing surface as possible.
    • You may run into timing issues while working with images and video along with the canvas. Make sure that your media is preloaded before you attempt to create effects with it.
    • The canvas is supported across most mobile platforms, but feature support is limited on iOS. Specifically, the drawImage API is not supported on iPad or iPhone.