mikeswanson / ai2canvas

A plug-in for Adobe Illustrator that exports artwork and animation to a HTML5 canvas

Ai2Canvas

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.

Requirements

This repository includes both a Visual Studio 2019 solution for PC and a Xcode 13.0 project for Mac. It also requires the Adobe Illustrator CC 2022 SDK.

Getting Started

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.

1. Download and extract the Adobe Illustrator CC 2022 SDK for PC or Mac from the Adobe Developer Console.

2. From the Adobe Illustrator CC 2022 SDK/samplecode folder:

    	git clone https://github.com/mikeswanson/Ai2Canvas.git
   

3. The Adobe Illustrator 2022 SDK/tools/pipl/pipl_gen/pipl_gen.py file is based on Python 2.7 which Apple removed starting with macOS Monterey (12.3). I've updated the build scripts to use Python 3, so you'll need to manually "upgrade" this script. I'm probably not allowed to host the edited file, but the good news is that there are only a handful of lines to change.

   • Replace all of the is and is not conditionals with == and !=.
   • When key or pipl_dict[key] values are written to the file, .encode('utf-8') them first.

4. You can now open and build the Visual Studio solution or the Xcode project. Output can be found in the Adobe Illustrator CC 2022 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.

Documentation

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.

ai2canvas's Issues

Decimal places

Please advise how best to incease the number of decimal places from the current default (which appears to be one decimal place) to three decimal places?

Chrome canvas elements produce much better rendering of small logos than SVG, which led me to discover your Ai2Canvas Illustrator plugin. To maintain the accuracy with svg graphics, it would be nice to increase the number of decimal places to three.

NB. I've only tested Ai2Canvas version 1.4 (for Adobe Illustrator CC 2019) on macOS.

It's nice to see this project has recently been updated. Many thanks.

Ai2Canvas HTML file encoded as ANSI

Hi,

It seems Ai2Canvas is encoding the HTML-file as ANSI. I had to convert it to UTF-8 using Notepas++ in order to get the characters correct. Tested on AI2020 (Ai2Canvas 1.5). See attached picture.

fail to load 1.3 into AI 2014 CC

when I double click the AI2CanvasMac.api this alert appear, it told me something like "can't find the illustration, the file is locked or is been using. ID -54

Is there anything i can do to fix this?

Other ways to see the tutorials?

The tutorial links are broken. Is there a documentation for the tutorials. I would like to learn more about this plugin. Cheers!

How to write a exe programe to export Ai to Canvas or SVG?

For most people, they don't have Ai.

features request

Hi, Thank you for creating such a helpful plugin for AI, which makes drawing complex vector graph in canvas possible.

As using this current version 1.3 in my project ( a map of China with provinces, landmarks, textures, clouds, waters, ships.. and so on, the total size of export is almost 6M ), I found the ability to only export root level layers is not efficient both in code development and AI design.

And, the more complicated the AI layers are, the more details need to be taken care of when considering the performance with canvas especially with mobile devices, all the layers should be drew only if necessary.

So below is the features I want to request:

Include boundary info

Boundary info is very helpful, which can be use to calculate if current layer is in the viewport or for other intentions.

I think every layer should include boundary info like below:

{
    left: 10,
    top: 10,
    width: 10,
    height: 20
}

Exports pure javascript data

It will be convenient if pure Javascript can be exported, and wrapped with CMD module, or just write to the global:

- map();

exports:

window.ai2canvas.map = {
    boundary: {
        left: 10,
        top: 10,
        width: 10,
        height: 20    
    },
    draw: function( ctx ){ ..... }
}

Support sublayers export

layers like:

- map
    - beijing
    - shanghai
    - ....

and exports:

window.ai2canvas.map = {
    name: 'map'
    boundary: {
        left: 10,
        top: 10,
        width: 10,
        height: 20    
    },
    draw: function( ctx ){ ..... },
    children: [
        {
            name: 'beigjing',
            draw: function( ctx ){ ... },
            ....
        }
    ] // every child just like its father, have properties like `boundary`, `draw` and `children` if sublayers exist
}

Thank you~

What is the best way to go about animating canvas?

Hi Mike!

Thanks for this plugin. I watched your Youtube videos and saw some js properties you inserted in the layer name areas to generate some animation.
Would you recommend Three.js to add some advanced animation instead of doing so inside of Illustrator? Thanks,