Since the launch of the Ai->Canvas plug-in for Adobe Illustrator a few days ago, I’ve collected a bunch of questions via e-mail, Twitter, blog post comments, and forums. This list should eventually make its way to the official Ai->Canvas project page on MIX Online, but in the meantime, I’ve included a first version of the FAQ in this post. If you have other questions that you’d like addressed on this list, please leave a comment or drop us an e-mail. And thank you for all of the encouragement, blog posts, and tweets!
Q. Why would I ever want to export vector graphics to a HTML5 canvas element when I can just use Illustrator to export to SVG? A. Excellent question! If you’re building a HTML5 application that can do everything with SVG, there’s no reason to use Ai->Canvas (and in that case, you should check out the Adobe Illustrator CS5 HTML5 Pack). However, if you’re building a canvas-based application or game that requires lower-level access and you need to draw more than simple bitmaps, Ai->Canvas makes the job much easier. Without a tool like Ai->Canvas, designers and developers are forced to manually write hundreds of lines of code like: context.bezierCurveTo(5.4, -1.5, 2.7, -1.5, 1.5, -0.5);. No fun at all.
Q. Can I use Ai->Canvas to convert .ai files without installing Adobe Illustrator? A. No. Ai->Canvas is not a file conversion tool. It runs within Illustrator so that it has direct access to the internal representation of your artwork. This enables very high-fidelity output and also simplifies the workflow. If you don’t have Adobe Illustrator and you’d like to try Ai->Canvas, you can download a free 30-day trial
Q. When using Internet Explorer 9 Beta 1, how do I prevent the “blocked content” alert when loading the exported HTML file? A. Choose Internet Options from the Tools menu (or press Alt + X), then click the Advanced tab. Scroll down to the Security section and make sure that “Allow active content to run in files on My Computer*” is checked. After you enable the setting and click OK, restart Internet Explorer for the changes to take effect.
Q. Which versions of Windows does Ai->Canvas work with? A. The PC version of Ai->Canvas works with Windows Vista and Windows 7. Due to some OS-specific function calls, it will not work with Windows XP.
Q. Does Ai->Canvas work with the trial version of Adobe Illustrator? A. Yes. If you’d like to try Ai->Canvas and you don’t have Adobe Illustrator, you can download a free 30-day trial.
Q. In the tutorial videos, the right-click “View source” menu in Internet Explorer 9 Beta 1 brings up Visual Studio 2010. How can I configure the same behavior? A. Press F12 to bring up the developer tools window. Choose File/Customize Internet Explorer view source/Other… Then browse to your Visual Studio folder (usually something like C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE). Select the devenv.exe file and click Open.
Q. Are there plans to release the Ai->Canvas source code? A. We had hoped to provide the source code for the plug-in, but the Adobe Illustrator CS3 SDK License Agreement (EULA) in section 2 appears to prohibit the release of source code. It sounds like it allows object code, but that wouldn’t help anyone who wanted to understand/modify/extend the plug-in.
Q. Why are my international characters lost during export? A. While all text is handled as Unicode within the Ai->Canvas plug-in, it is converted to basic ASCII characters in the output stage. This is a known issue that is on the list to be addressed in a future version.
Q. How can I include complex animation properties when Illustrator CS3/CS4 has a 100-character layer name limit? A. Each property has an equivalent short name that uses fewer characters. For example, the rotate-timing-function property can be shortened to r-t-f, saving 17 characters. Some values also have short versions. For example, origin: center can be shortened to o:c. See the Ai->Canvas Extended Documentation for details.
Q. Is there a way to visualize the timing (easing) functions that are included in the Ai2CanvasAnimation.js file? A. Yes. This HTML file draws a line graph for each of the built-in timing functions. The x-axis represents the input value (from 0.0 – 1.0), and the y-axis represents the output value (from 0.0 – 1.0).
Q. Are there plans to create a version of Ai->Canvas for Inkscape, Fireworks, [fill in app name here]? A. Not at this time. Because the Ai->Canvas plug-in is written using the Adobe Illustrator SDK (software development kit), it is very specific to the internal workings of Illustrator. While the concepts could certainly be re-purposed for other drawing applications, it’s likely that very little of the actual code could be re-used.