Adobe Illustrator to HTML5 Canvas Plug-in Released!

  • Article

I am happy to announce that after nearly four months of work, the secret MIX Online project is no longer a secret! Today, we launched Ai->Canvas, a free plug-in for Adobe Illustrator CS3, CS4, and CS5 that works with OS X, Windows Vista, and Windows 7. The plug-in makes it easy to export artwork and animation (yes, you heard that right) directly from within Illustrator to HTML/JavaScript that you can use in your own applications.

For a quick one-and-a-half minute introduction, watch this brief overview video. Then, download the version for Windows or OS X, extract it to your Illustrator plug-ins folder, and spend some time on the documentation page, where you’ll find 10 tutorial videos that total around 25 minutes in length. Thomas Lewis wrote a nice article titled Introducing the Ai to Canvas Plug-In that provides even more background and context.

If you’ve read my blog over the years, you’ve probably heard me talk about the Adobe Illustrator to XAML export plug-in I wrote back in 2005. Well, about four months ago, Thomas and I were chatting at lunch, and he was evangelizing to me about the new canvas element in HTML5. As we talked, it became clear that canvas was an element that could benefit from some tooling. So after lunch, I did a search, and most of the tutorials and information I found used very simplistic smiley faces or basic shapes to demonstrate the canvas features. The light bulb went off, and I wondered if a version of my XAML plug-in could be re-tooled to work with canvas.

Fast-forward four months, and the plug-in has been completely re-architected and re-written from the ground up. What started out as a classic C project that had reached its extensibility limits is now an object-oriented C++ project with room to grow (around 23K lines of cross-platform code for the geeks out there). Along the way, I basically memorized the entire HTML5 canvas spec, encountered some small implementation issues in each browser, read a bunch of HTML5 books (HTML5 for Web Designers by Jeremy Keith is my favorite introduction to the topic), read and then re-read the ECMA-262 (JavaScript) spec, and consumed a few JavaScript books for good measure.

If you’re interested in the low-level details about how Ai->Canvas is built, you might enjoy Charles Torre’s interview with me on Channel 9. In the interview, I talk about fun topics like arc-length parameterization that are sure to be a hit at parties. Well…at least the kind of parties I attend. :-) Strike that…I don’t really attend parties…

While we’re on the topic of HTML5, you should also check out the Adobe Illustrator CS5 HTML5 Pack (from Adobe Labs). Their release extends the fantastic SVG support that’s been in Illustrator for years, and it’s great to see a tool like this from Adobe themselves. I can’t wait to see where they take it.

Over the months, I’ve built-up a bunch of test files for the plug-in (over 100). Most of them illustrate very simple features, and they’re not much to look at. Here are a few that might be interesting to folks:

  • Yellowstone Map – this is a great acid test for the plug-in, and it’s one of the sample files that ships with Illustrator. If you don’t have the fonts installed on your machine, the output won’t look correct. This complex file exports in a couple seconds on my machine. I can’t imagine the practical use of this much canvas HTML/JavaScript, but it’s fun!
  • Pencil Writing (and the original Illustrator file) – this example shows animation along a complex path and includes some dampened rotation animation too.
  • Clock (and the original Illustrator file) – a simple clock with a few lines added to the init() function to set the clock.
  • Newton’s Cradle (and the original Illustrator file) – an example of Newton’s Cradle that uses triggers to start one animation when the other animation ends.
  • Closed Path Animation (and the original Illustrator file) – shows how to set the “follow orientation” of a drawing so that it follows the direction of the curve.

The only file that’s been edited is the Clock example, since it’s no fun looking at a clock that has the wrong time. :-) Otherwise, all of these are directly out of the Ai->Canvas plug-in.

Thank you to everyone who helped test early versions of the plug-in, including many of the companies who created the HTML5-based sites for Beauty of the Web. Your insights absolutely helped to refine the feature-set.

I’d love to hear your feedback about the plug-in so that the next version is even better. Also, if you create any fun projects…even if you’re only using it to export artwork, add a comment along with a URL.

Enjoy!

Comments

  • Anonymous
    October 12, 2010
    Since AI files are basically PDF1.4 files, how hard would it be to take this code and create a stand-alone PDF to Canvas converter? (sans the animation part) Preferably as a CLI based app run from a terminal. This would be great for web servers to be able to render PDF documents server-side into canvas elements. i.e. no embedded viewers and being able to manipulate it with javascript. Also handy for inkscape folks doing Inkscape SVG -> PDF -> Canvas.

  • Anonymous
    October 12, 2010
    It seems to me that Illustrator would be much more suited to exporting to SVG (including animation) than Canvas. Why not keep it as vector graphics instead?

  • Anonymous
    October 13, 2010
    @FishB8: Interesting question, and I think it would depend on the desired interactivity. Most of the text/graphics can be exported with full fidelity, but in many cases, rendering to a bitmap would have the same effect with less overhead. @Greg: I expect that this will be a common question. Illustrator is absolutely suited to exporting SVG, and their HTML5 Pack makes that workflow even better. If you're building a site with SVG, there's no reason to use the Ai->Canvas plug-in. However, if you're building an application or game that uses canvas, there is no other way to get artwork with any level of sophistication (that you intend to transform/scale) into your app. Of course, you can always use bitmaps too.

  • Anonymous
    October 14, 2010
    Awesome stuff as always Mike!

  • Anonymous
    October 17, 2010
    Hi Mike, thanks for the great plug-in. I gave it a first try with an old illustration I made back in 2004. And was impressed by the documentation and the first results. Back yard: an Ai to Canvas Export Example: awkbird.com/.../backyard