Mike Swanson: Adobe Illustrator to HTML5 Canvas - Under the Hood

Play Mike Swanson: Adobe Illustrator to HTML5 Canvas - Under the Hood
Sign in to queue


The Ai->Canvas plug-in enables Adobe® Illustrator® to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps. 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. Learn how to subscribe to built-in events, determine if a shape has been clicked, and debug the exported code

Here, Ai->Canvas creator, Mike Swanson, spends some quality time with me digging into the details inside and behind this very useful tool. We cover many areas including, but not limited to, the plug-in's architecture, performance characteristics, design decisions, native code to JavaScript conversion tactics and implementation, etc. Mike spends most of his time where a Going Deep guest must: at the whiteboard. He also demos his latest conversion technology and I must say, it is really impressive. Mike is a great engineer.

You can jump right into the rabbit hole with us here.

Tune in.

Enjoy. Learn.




Download this episode

The Discussion

  • User profile image

    Great post I salute you... opens up a great new approach with the plugin and the video explains clearly how it's glued together.

  • User profile image

    Nice work Mike. This could come in very handy, even educational.

  • User profile image

    Awesome! Very impressive work and very helpful in understanding the basics of animation. Thanks for putting this together!

  • User profile image

    Very nice work Mike... very impressive to use !
    Detailled code of SVG animation was a hard work for sure I think.

    Thanks for putting here package and video.

Add Your 2 Cents