The HTML5 Canvas Tag De-Mystified

HTML Canvas is a technology that allows web developers to draw and animate 2D vector graphics in a browser without relying on a plug-in like Flash. Let’s take a moment to explore what the canvas tag is all about, and how we’re using it at Acquity Group today.

Originally used by Apple in OSX and Safari, the canvas tag is becoming more and more relevant as browser support is rapidly improving. Unfortunately browser support is still limited and while Internet Explorer 9 will support canvas, IE8 and below (about 60% of the market share depending on the source) does not support the tag which is why it isn’t always practical to use.

There is a workaround called Explorer Canvas that Google developed which converts the drawn canvas elements into VML which is supported by Internet Explorer. The downside is that it won’t work when javascript is disabled, and things like tooltips that target elements of a canvas drawing won’t work unless they were programmed to work with Explorer Canvas.

That being said, canvas has it’s place. In fact, something that draws vector shapes with basic animations sounds very similar to the basic functionality of Flash, which is why many view canvas as an alternative to Flash on devices like the iPad where Flash isn’t supported. Unfortunately the tools we have to create using canvas are limited and not as robust as Flash.

New canvas jquery libraries are popping up all the time. Some are animation libraries, others are charting and graphing libraries. As time goes on and better tools emerge, canvas will have more practical applications. Perhaps vector drawing programs will export graphics with canvas code to draw them in a browser. Maybe Flash will add in an HTML 5 export. For now no one knows (except maybe some Adobe employees) but that will greatly influence how the tag will be used in years to come.

A few practical uses for canvas:

  • Dynamic graphs, charts, diagrams and other visual references
  • Scalable vector images with smooth lines
  • Creating hit states using polygons and shapes that are not restricted to rectangles
  • Instances where you want to edit the color, size, or shape of a drawn element
  • Simple vector animations without a plug-in (except in IE)

Right now, because of the limited browser support, limited documentation, and lack of powerful tools, canvas is not always the most practical solution. There are many impressive demos out there, but some of the most impressive pieces took weeks and months to develop which may be out of scope for typical projects.
For now the most practical application to use canvas is for projects where dynamic graphs are used, especially if Flash is not an option for a project. Canvas was used to meet these requirements for a recent project in July 2010. The Flot and RGraph libraries were used to build these graphs, and Explorer Canvas was used to render them in Internet Explorer. As more situations come up where it is appropriate to use canvas we will continue to develop with it.

In Front End Development’s mobile testing lab these graphs were tested on the iPad, and iPhone and they rendered perfectly. Future projects that utilize dynamic graphs on devices that don’t support Flash should work well with a similar execution.

In the future we will probably be using canvas more and more, especially as more sophisticated tools emerge and devices like the iPad gain momentum. There are not many agencies that have experience using canvas, and in there is a potential for many new projects from the experience we have, especially for clients with a need for charts and graphs on the iPad.

One comment

  1. I plan to start using the HTML Canvas for animations ASAP. Even if 60% of IE8 users can’t view the animations yet, the canvas coding doesn’t decrease searchability of the site like Flash usage. I am currently porting 2D illustrations to Flash to animate them, but it’s still clunky and slow in creation and final implementation on the sites that I maintain.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: