I’ve ported my Adobe Illustrator to HTML5 canvas export plug-in to work with Illustrator CC, and while I was at it, I added support for gradient stop opacities and non-zero/even-odd fill rules. I know that many of you are still running CS6, so I’ve added these features to the CS6 version too.
You can download version 1.2 of the plug-in on the new Ai->Canvas project page.
Gradient Stop Opacity
The gradient stop feature was a very common request, and I hope it avoids the need to hand-edit all of those alpha values in the exported code. Here’s one of my test files that shows a linear gradient with various opacities on top of some solid black splotches (see the exported code).
Fill Rule
Browser support for CanvasFillRule is relatively recent, and I’ve found that different browsers produce different results. Non-zero and even-odd fill rules are common in most 2D graphics APIs, so it’s no surprise to see them added to the canvas spec. Here’s one of my test files that shows a star shape for each fill rule (see the exported code).
Project Page
Ai->Canvas was originally launched with MIX Online back in 2010. Unfortunately, MIX Online is no longer being updated or maintained, so I’ve added a permanent Ai->Canvas project page where you should always be able to find the most up-to-date version of the plug-in.
I’ve also added the tutorial, its assets, the extended documentation, and a link to the online video tutorials to the download so that everything is contained in a single package.
Open Source
Last, but certainly not least, I’m happy to announce that Adobe has approved my request to open source the Ai->Canvas plug-in! It has always been my intent to release the source code, but the Illustrator SDK EULA prevented me from doing so. I’m asked about this topic about once a week, and it’ll be great to finally reply with a URL instead of an excuse. 🙂
Please take a moment to thank Adobe Sr. Creative Cloud Evangelist, Tom Krcha, for helping me get this approval. Without his help, I don’t think it would have happened. I’d also like to publicly thank Anubhav Rohatgi, Rajesh Budhiraja, and Vincent Hardy (and everyone else behind-the-scenes at Adobe) for their assistance.
It’ll take me some time to polish the code, package it up, and post it online, but follow me on Twitter or subscribe to this blog to be notified when it happens.
In the meantime, happy coding!
Leave a Reply