The free Ai->Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element using JavaScript drawing commands. Animation can be added to control rotation, scaling, opacity, and motion along a path. Then, events can be used to trigger other animations. Finally, the exported HTML and JavaScript can be extended and used in your own applications running on the latest versions of Internet Explorer, Firefox, Chrome, Safari, and Opera.
This brief video (while a bit dated) provides an overview of the plug-in’s functionality.
Download
Ai->Canvas is compatible with both the Mac and PC versions of Adobe Illustrator. The download includes a tutorial (with accompanying video) that shows how to export artwork, add animation, and extend its JavaScript code. Refer to the readme.txt file for installation instructions.
- Ai->Canvas Version 1.8 (for Adobe Illustrator CC 2022/v26.0) – update to fix Illustrator compatibility
- Ai->Canvas Version 1.7 (for Adobe Illustrator CC 2022/v26.0) – adds Apple silicon support for Mac
- Ai->Canvas Version 1.6 (for Adobe Illustrator CC 2021/v25.0 and 2022/v26.0)
- Ai->Canvas Version 1.5 (for Adobe Illustrator CC 2020/v24.0)
- Ai->Canvas Version 1.4 (for Adobe Illustrator CC 2019/v23.0)
- Ai->Canvas Version 1.3 (for Adobe Illustrator CC 2014)
- Ai->Canvas Version 1.2 (for Adobe Illustrator CS6 and CC)
- Ai->Canvas Version 1.0 (for Adobe Illustrator CS3, CS4, and CS5)
Online Training
My favorite online learning site, lynda.com, has published a short course by Chris Converse titled Design the Web: Illustrator to Animated HTML5 Canvas. The course walks through installation of the plug-in, an introduction to exporting vectors and bitmaps, an explanation of animation concepts and properties, and a few tips about optimizing the files for workflow and final delivery. It’s a great way to quickly get up-to-speed on the plug-in’s functionality.
Source Code
The Ai->Canvas source code, along with a Visual Studio solution and a Xcode project, is available at the Ai2Canvas repository on GitHub.
As always, I’d love your feedback.