HTML5 Rocks

HTML5 Rocks

HTML5 Features

Graphics

The web has always been a visual medium, but a restricted one at best. Until recently, HTML developers were limited to CSS and JavaScript in order to produce animations or visual effects for their websites, or they would have to rely on a plugin like Flash.

With the addition of technologies like the canvas element, Web GL, and SVG images, this is no longer the case! In fact, there are many new features which deal with graphics on the web: 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL.

What’s New

The Future is Now!

Of course, none of these new technologies would be useful if they weren’t capable of running fast. Thankfully, JavaScript engines have become fast enough to run 3D games and manipulate video in realtime. Hardware accelerated compositing is also being implemented in many browsers, meaning that even CSS transitions and transforms will be butter-smooth.

Developers are taking advantage of these features: a flood of HTML graphics demos have been showing up on the web, ranging from implementations of old 2D graphics algorithms, to brand new techniques created specifically for the modern web.

Browser Support

“Graphics” is such a wide topic that there are several specifications being worked on. A comprehensive graphics demo may use several of the following:

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

Demos

In the Wild

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

Resources