HTML5 Canvas: What It Is and Why It's Used

This element has benefits over other technology

HTML5 includes an exciting element called CANVAS. It has lots of uses, but in order to use it, you need to learn some JavaScript, HTML, and sometimes CSS.

This makes the CANVAS element a bit daunting for many designers, and in fact, most will probably ignore the element until there are reliable tools to create CANVAS animations and games without knowing JavaScript.

What HTML5 Canvas Is Used For

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 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 app 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.”

The CANVAS element lets you draw graphs, graphics, games, art, and other visuals right on the web page in real-time.

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

  1. The CANVAS element is embedded right in the HTML. The scripts that draw on it are either in the HTML or in a linked external file. This means the CANVAS element is a part of the document object model (DOM).
    1. 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.
    2. 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.
  2. CANVAS element is natively supported by web browsers. In order for users to actually use Flash, their browser must have the plugin installed. This is often a hassle for most people due to outdated Flash installs or the fact that their operating system simply doesn't support it.
    1. It used to be that every browser had the plugin installed, but that's no longer the case, and many are even removing the plugin due to difficulties. Plus, it's not even available on the popular iOS platform.

Canvas Is Useful Even if You Never Planned to Use Flash

One of the main reasons why the CANVAS element is so confusing is that many designers have become used to a completely static web. Images might be animated, but that's done with GIF, and of course, you can embed video into pages but again, it's a static video that simply sits on the page and maybe starts or stops due to 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.

When to Consider Using the Canvas Element

Your audience should be your first consideration when deciding whether to use the CANVAS element.

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 since those 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 Mac computers could benefit from a Silverlight application.

However, 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 this element allows you to have fallback options like static images for older browsers that don't support it.

However, it's not recommended to use 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's 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "HTML5 Canvas: What It Is and Why It's Used." ThoughtCo, Sep. 30, 2021, thoughtco.com/why-use-html5-canvas-3467995. Kyrnin, Jennifer. (2021, September 30). HTML5 Canvas: What It Is and Why It's Used. Retrieved from https://www.thoughtco.com/why-use-html5-canvas-3467995 Kyrnin, Jennifer. "HTML5 Canvas: What It Is and Why It's Used." ThoughtCo. https://www.thoughtco.com/why-use-html5-canvas-3467995 (accessed March 29, 2024).