How it works
The
Download
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.
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.
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.
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
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?”
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.
Introduction Video
Looking for a quick overview? Watch this short one-and-a-half minute introduction to the Ai->Canvas plug-in.
Ai->Canvas on Channel 9
If you’re interested in how the Ai->Canvas plug-in was written, watch this 55-minute “Under the Hood” interview with Mike Swanson on Channel 9.
Friends Who Are Using It
