Why Use HTML5 Canvas

The HTML5 CANVAS Element Has Benefits Over Other Technology

HTML5 includes an exciting new element—the element. This element has a lot of uses, but in order to use it you need to learn some JavaScript as well as HTML and sometimes CSS. This makes the CANVAS element a bit daunting for many designers, and in fact, most designers will probably ignore the CANVAS element until there are reliable tools to create CANVAS animations and games without knowing JavaScript.

The HTML5 CANVAS element can be used for a lot of things that previously you had to use an embedded application like Flash to generate:

  • dynamic graphics
  • online and offline games
  • animations
  • interactive video and audio

In fact, the main reason people are starting to use the CANVAS element is because of how easy it is to turn a plain web page into a dynamic web application and then convert that application into a mobile application for use on smartphones and tablets.

If We Have Flash, Why Do We Need Canvas?

According to the HTML5 specification, the CANVAS element is:

“a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.”

This means that the CANVAS element is a new element in HTML5 that allows you to draw graphs, graphics, games, art, and other visuals right on the web page in real time in the user's browser.

You may be thinking that we can already do that with Flash, but there are two major differences between CANVAS and Flash:

  • The CANVAS element is embedded right in the HTML. The scripts that draw on it are right in the HTML (or a linked external file) as well. This means that CANVAS element is a part of the document object model or DOM. Flash is an embedded external file. It uses either the EMBED or the OBJECT element to display, and cannot interact directly with the other HTML elements. Because the CANVAS element is part of the DOM, it can interact with the DOM in many ways. For example, you might create an animation that changes when some other part of the page is interacted with—such as a form element being filled in. With Flash the most you could do would be to start the Flash movie or animation, but with CANVAS you could create many different effects, even adding the text from the form field into the animation.
  • The CANVAS element is supported natively by the web browsers. In order for your customers to use Flash, their browser must have the plugin. It used to be that every browser had the plugin installed, but that is no longer the case—many people are removing the plugin because of difficulties and it's not available at all on operating systems like iOS (iPhone and iPad).

But Canvas is Useful Even if You Never Planned to Use Flash

I think that one of the main reasons why the CANVAS element is so confusing is that many designers have gotten used to a completely static web. Images might be animated, but that is done with GIF images to create a looping style video. And of course, you can embed video in your web pages, but again it's a static video that simply sits on the web page and maybe starts or stops because of browser interaction, but that's all.

The CANVAS element allows you to add so much more interactivity to your web pages because now you can control the graphics, images, and text dynamically with a scripting language. The CANVAS element helps you turn images, photos, charts, and graphs into animated elements on your web page.

When to Consider Using the CANVAS Element

The first thing you should consider when deciding whether to use the CANVAS element on your web pages is your audience.

If your audience is primarily using Windows XP and IE 6, 7, or 8, then creating a dynamic canvas feature is going to be pointless, as these browsers don't support it. If you are building an application that will be used on Windows machines only, then Flash might be your best bet. An application to be used on Windows and Macintosh computers could benefit from a Silverlight application. But if your application needs to be viewed on mobile devices (both Android and iOS) as well as modern desktop computers (updated to the latest browser versions), then using the CANVAS element is a good choice. Keep in mind that using the CANVAS element allows you to have fallback options like static images for older browsers that don't support it.

I don't recommend using HTML5 canvas for everything. You should never use it for things like your logo, headline, or navigation (although using it to animate a portion of any of these would be fine).

According to the specification you should use the elements that are most suitable for what you're trying to build. So using the HEADER element along with images and text is preferable to the CANVAS element for your header and logo.

Also if you are creating a web page or application that is intended to be used in a non-interactive medium like printing, you should be aware that the CANVAS element that has been dynamically updated may not print as you expect. You might get a print of the current content or of the fallback content.

Use Canvas to Have Fun

One of the reasons I like the CANVAS element is because it gives us so many opportunities to create fun and interactive web applications.