Design insights & tutorials.

Ai to Canvas HTML5 Plug-in

Hot on the heels of the Adobe HTML5 Pack, here’s a handy new Adobe Illustrator plug-in from Microsoft’s MIX Online web developer resource site that will export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser.

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 your own applications running on the latest versions of Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5, and Opera 10.

Ai->Canvas supports rotation, scaling, fading, and movement along a path. For more advanced users, add triggers that start one animation when another animation completes.

The purpose of Ai->Canvas is to accelerate your HTML5 canvas development. The HTML and JavaScript that it exports is meant to be copied into your own application and extended.

About the Author, George Coghill

George Coghill isa freelance humorous illustrator/cartoonist specializing in mascot cartoon character design & cartoon logos. His cartooning & illustration work can be seen at and at his cartooning and illustration blog. Be sure to follow me on Twitter here!
Discover More by George Coghill


We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Jaz Harlow

    Ai to Canvas free HTML5 plugin

  • Xiaphong


    • 303358777

      Yes,you are right!

  • sikis

    p – that looks like an awesome timesaver. I just upgraded to Indesign CS5, so if they could get the plugin updated to that version too, I will most definitely cough up the money for i1

  • asbestos lung cancer

    thanks George Coghill (:

  • filmini izle

    I hear the first time in HTML5. Can you explain. Thank you.

  • Anonymous

    Thanks pretty interesting, I might have to give it a try. Thanks!

  • Mortgage loan rates

    Oh yeah real greatHTML5 Plug-in

  • sildenafil

    Good info thanks for sharing with us.Nice information, valuable and
    excellent, as share good stuff with good ideas and great information.

  • panax

    Very cool and interesting article

  • b filmler

    is there any demo or something?