• Are There Practical Uses for HTML5 Canvas?

Are There Practical Uses for HTML5 Canvas?

Posted by James Marshall | Rare Thinking |

When it was announced that Canvas would be included in HTML5’s standard, there was a buzz amongst developers about its capabilities. Canvas renders 2D and 3D animation up to 60 frames per second. It doesn’t require a plugin because it is standard with all browsers supporting HTML5. It’s a DOM element, so it could be styled and manipulated with CSS, and play nicely with other HTML elements. With Adobe Flash fading away, it was exciting to have a mobile-friendly alternative that seemed to run even better than Flash.

Yet after all of the build-up, where are the results? HTML5 is supported by all modern browsers, mobile and desktop. Computers and mobile devices are getting faster and their browsers are becoming more stable. Flash is dead, but Canvas’ revolution has yet to arrive. A skim through tutorials sets you on a journey through pie charts and graphs that stops cold on video development. Canvas is being used, but mostly for games and gamification. So much so that there are whole websites dedicated to hosting games made with Canvas, such as GameJolt.

The time is right for Canvas to make a comeback in web development. Tools are being developed to streamline Canvas development. Even Adobe Flash CC allows you to export your project to HTML5 and Canvas.

Where Can Canvas Make a Comeback?

  • Dynamic images. With the use of Javascript, Canvas allows you to layer, edit, mask and manipulate images. Images can be watermarked, tweaked and cropped without more server overhead than serving a static image.
  • Button hover states. Buttons will cease to be restricted by CSS and static images. Icons can rotate, morph and animate. Button shapes can twist and stretch to the limits of designers’ and developers’ imaginations. This interactivity could expand to menus and navigation, with the potential to provide mobile friendly solutions to the commonly used dropdown.
  • Canvas can fill the hole that Flash left behind. Canvas can do animation, interactivity and video better than Flash ever could. Assets within Canvas can be loaded in as spritesheets, audio files and video files, creating a more modular experience that is easier to update without the need for exporting.

Canvas has the potential to reimagine how we develop the web. It could be used as sparingly as with dynamic images and buttons, or as ambitiously as having it be a major part of design, such as navigation. Regardless of how it’s used, it begs to be a part of modern web development. Even greater than its ease of development is its ease of use for online visitors. Canvas, unlike Flash, has the ability to run exceptionally well on mobile devices. Admittedly, we could probably get by with developing websites without mentioning Canvas again, but why would we want to do that?