By Mike Swanson
The 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 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.
This repository includes both a Visual Studio 2010 solution for PC (with both Win32 and x64 targets) and a Xcode 6 project for Mac. It also requires the Adobe Illustrator CC 2014.1 SDK.
Because the project depends on the Illustrator SDK and references many files using relative paths, it is important to place the project in the correct location.
-
Download and extract the Adobe Illustrator CC 2014.1 SDK for PC or Mac
-
From the Adobe Illustrator CC 2014 SDK/samplecode folder:
git clone https://github.com/mikeswanson/Ai2Canvas.git -
You can now open and build the Visual Studio solution or the Xcode project. Output can be found in the Adobe Illustrator CC 2014 SDK/samplecode/output folder.
If you decide to move the project, you will need to update the many relevant paths. As a historical note, Ai->Canvas started its life based on an older version of Adobe's TextFileFormat sample, and it was easiest to create the new project in a parallel folder to keep the relative references intact.
For more detail about how the plug-in works along with a full tutorial and extended documentation, visit the Ai->Canvas Plug-In for Adobe Illustrator project page on my blog.