Export Illustrator Vector Artwork to a Canvas Element

Posted on by Paul

Transforming my ugly old bitmap logo graphic into a slick canvas element with polished gradients and smooth curves, using the Ai→Canvas plug-in could not have been any easier.

After downloading and installing the OSX version of the plug-in, I starting with the old graphic as a reference and placed (not linked) the .JPG into an Illustrator artboard. I next overlaid my original vector paths and resized them to the correct proportions. I pulled out all the colors that I needed and inserted a layer underneath to simulate the drop-shadow used previously. Note: I did not consider using CSS3 box-shadow property because my graphic is a circle, not a box. I did not test this presumption however.

Once the weight and color of the stroke were set up, I configured the gradients to match the look of the bitmap and saved a working copy as an EPS. After a quick File > Export a nicely constructed .HTML file was created in my directory, and opened in my default browser.

Some of the alterations that I made to the exported code include:

  1. wrapping the canvas in an a element
  2. initializing the rendering via jQuery $(document).ready(…) instead of <body onload="init()"> and cleaning up the then-unnecessary function declarations
  3. adding alpha channel to the “background” gradient 
    1
2
3

    gradient.addColorStop(0.92, "rgba(66, 101, 47, 1)");
gradient.addColorStop(0.97, "rgba(160, 178, 151, 0.5)");
gradient.addColorStop(1.00, "rgba(255, 255, 255, 0)");

Feel free to check out the source code of this site in lieu of specific code examples.

I didn’t include any screenshots of the process, simply because the whole thing took less than an hour to put in place. Would step-by-step screenshots be helpful?

Switch to our mobile site