running words around
design education and visual communication
authored by chris m hughes

AI ->Canvas

Wednesday, 21 December 2011

As HTML5 support broadens out across the various browsers and devices, its becoming clear that it can do almost anything, including some stuff that designers could only have dreamed about not too long ago.

One great example is AI->Canvas, an Adobe Illustrator plug-in (from Microsoft’s MIX Online) that can export vectors as HTML5 to render as SVG static and animated images in a webpage.

Before you blink and rub your eyes, here's a different way of saying the same thing - you can create illustrator artwork and export it directly into a webpage. And if the vector features complex artwork like Gaussian blur, drop shadow and so on, the plugin rasterises that part of the work.

Ai->Canvas is able to export complex shapes, fill styles, line styles, gradients, transparency, native text, bitmaps, pattern fills, symbols, drop shadows, and more.

It supports rotation, scaling, fading, opacity and keyframe movement along a path. For more advanced useage, triggers can be added that start one animation when another animation completes. Sounds a lot like Flash, doesn't it?

This is all possible because of HTML5's rather amazing canvas tag, which allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Check out more on the AI-Canvas site, and download the plugin (oh did I mention its free).