Ai->Canvas brings <canvas> to human beings.

The <canvas> element, new to html 5 but available in some web browsers for quite a while, allows the browser to natively render vector graphics. The end result is: images that can re-size, morphing, animation and, in some cases, smaller file sizes. There has always been one tremendous disadvantage in implementation of the canvas element; you need to code out the drawing of each line, one-by-one, in JavaScript. As a result, most examples of <canvas> are limited to simple shapes. More complex imagery is generally reduced to embedding a bitmap image within the vector canvas.

html5 canvas exampleAi->Canvas, a new plugin for Adobe Illustrator, suddenly takes away all the pain of <canvas> art. Simply choose File-Export from within Illustrator and select <canvas> as the file type. It takes your vector art and automatically converts it to <canvas> ready javascript code. The results are extremely impressive. I gave the <canvas> treatment to my ‘ol Green Zeta mascot and, other than some slight color difference, it’s indistinguishable from a png rendering. From my example, you can see that <canvas> isn’t always the most efficient image format. Complex shapes mean complex code, and bigger file sizes. There are other advantages to <canvas> that are worth considering. A canvas image can be re-sized on the fly. Elements can be broken down and re-used. With the help of some javascript it can even be animated. Imagine my Zeta example in a web-cartoon format. Typically that would have to be done in Flash or rendered out to video.

For platforms which do not support Flash, such as iPhone, <canvas> is your best option. With the help of AI->Canvas, this option is finally viable. I predict we will see the beginnings of a Flash-like development environment, built around html 5 and the <canvas> element, very soon. Like Flash, it will take time to grow and mature. Acceptance of these features will have to grow as well. Internet Explorer users will finally have <canvas> support with the release of version 9. However, the advantages of <canvas> ensure it will become the standard. As a web developer I love the idea of being able to make quick edits to multimedia content without being tied to an IDE/Compiler. Ai->Canvas is a great first step in that direction, bringing canvas art to… artists.

This entry was posted in Web Development. Bookmark the permalink.

One Response to Ai->Canvas brings <canvas> to human beings.

  1. kangax says:

    I’ve been working on fabric.js library [1], which does something similar to what Ai->Canvas does. Contrary to Ai->Canvas, fabric.js also allows to manipulate imported SVG shapes programmatically. This means that you can move, resize, rotate, add, delete shapes with mouse (or keyboard) after importing them from SVG documents. Ai->Canvas doesn’t (yet?) have support for that.

    [1] http://github.com/kangax/fabric.js

Leave a Reply

Your email address will not be published. Required fields are marked *