

The Ai->Canvas source code, along with a Visual Studio solution and a Xcode project, is available at the Ai2Canvas repository on GitHub.Adobe Illustrator (Ai) is a well-known vector graphics software from Adobe graphic software company. It’s a great way to quickly get up-to-speed on the plug-in’s functionality.

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. My favorite online learning site,, has published a short course by Chris Converse titled Design the Web: Illustrator to Animated HTML5 Canvas. Ai->Canvas Version 1.0 (for Adobe Illustrator CS3, CS4, and CS5).Ai->Canvas Version 1.2 (for Adobe Illustrator CS6 and CC).Ai->Canvas Version 1.3 (for Adobe Illustrator CC 2014).Ai->Canvas Version 1.4 (for Adobe Illustrator CC 2019/v23.0).Ai->Canvas Version 1.5 (for Adobe Illustrator CC 2020/v24.0).Ai->Canvas Version 1.6 (for Adobe Illustrator CC 2021/v25./v26.0).Refer to the readme.txt file for installation instructions. The download includes a tutorial (with accompanying video) that shows how to export artwork, add animation, and extend its JavaScript code. This brief video (while a bit dated) provides an overview of the plug-in’s functionality.Īi->Canvas is compatible with both the Mac and PC versions of Adobe Illustrator.


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. Then, events can be used to trigger other animations. Animation can be added to control rotation, scaling, opacity, and motion along a path. 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.
