HTML5 includes an exciting new element—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 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
- 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:
CANVASelement 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
CANVASelement is a part of the document object model or DOM. Flash is an embedded external file. It uses either the
OBJECTelement to display, and cannot interact directly with the other HTML elements. Because the
CANVASelement 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
CANVASyou could create many different effects, even adding the text from the form field into the animation.
CANVASelement 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.
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
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.