Tell your friends
Like what you see? Check out other labs at the MIX Online Lab »

How it works

The Ai->Canvas plug-in enables Adobe® Illustrator® to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps.

Download

To install Ai->Canvas, download a version for Windows or OS X, and extract the Ai2Canvas.aip file to your Adobe Illustrator plug-ins folder. Be sure to re-start Illustrator if it's already running. That’s it!
Download the Windows plug-in
Download the Macinsosh (Apple) plug-in

Drawing

Almost any Illustrator artwork can be exported to a HTML5 canvas element. Where canvas lacks support for a specific feature, Ai->Canvas automatically rasterizes the artwork to a bitmap and properly positions the image on the canvas.

Drawing Tutorial

Animation

Bring your artwork to life by adding animations to your Illustrator drawings. Ai->Canvas supports rotation, scaling, fading, and movement along a path. For more advanced users, add triggers that start one animation when another animation completes.

Animation Tutorial

Code

The purpose of Ai->Canvas is to accelerate your HTML5 canvas development. The HTML and JavaScript that it exports is meant to be copied into your own application and extended. Learn how to subscribe to built-in events, determine if a shape has been clicked, and debug the exported code.

Code Tutorial

Documentation

Read the Ai->Canvas documentation and learn how to use the plug-in for drawing, animation, and code. Follow along with the 10-part video tutorial that starts with the basics and ends with the solar system…all in less than 30 minutes.

Writings and Lab Notes

Rick Barraza

Translating CANVAS with HTML5

by Rick Barraza

No matter what visual language I need to learn, the translation process always starts the same. The very first thing I solve is “How do I put multiple visuals on a screen and animate them to fly around?”

Thomas Lewis

Introducing the Ai to Canvas Plug-In

by Thomas Lewis

Thomas gives a quick introduction to the Ai to Canvas Plug-In which explains what the plug-in does, how it came to be, and how to get up and running quickly to build great canvas web apps.

Friends Who Are Using It

Joshua Davis Studios