Convert Illustrator paths to Javascript for the HTML Canvas

Introduction for project codename Flanvas. Flanvas is the canvas system I'm workin on in javascript that will allow you to use the canvas in a flash-like manner. Finally, an html native app that has interactivity. The Loader class will also load in XAML from an AI export.

I've been doing some research lately in to how I can convert Illustrator paths in to something I can use with the HTML Canvas. I've tried numerous things to try and get the path data out of illustrator, but it hasn't gone very well -- until today.

I stumbled across two very helpful articles. The first of which covers AI > XAML conversion and offers a free Illustrator plug-in that converts Illustrator work in to XAML. XAML is a XML based language Microsoft maintains that handles displaying graphics for WPF. Mike Swanson built this plug-in and it has proved to be very helpful so far.

Here's a snippet of what XAML path data looks like: 

<!-- Layer 1/<Path> -->
<Path StrokeThickness="1.0" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="#ffffffff" Data="F1 M 0.048,0.498 L 83.048,8.498"/>

This is all great and dandy, but what am I supposed to do with this information? Well, class Jack says to start toying witht he paths and see what numbers change so that I can figure out what is what. This helped a little, but eventually I drove myself back to Google. Shortly after, I found my second helpful article about "Drawing Graphics Shapes in XAML" written by Mahesh Chand. With this new information I am able to convert XAML in to a javascript format with I can use to render this data in an HTML Canvas.

What's next? Well, I'm going to start on a script that will convert the XAML code to javascript. You can thing use this javascript to draw your shapes in the HTML Canvas. My plan is to replace a lot of my flash development with this technique (using jQuery tweens). I'm hoping this will allow me to create rich content that will work not only for the desktop folks, but for the mobile users as well (iPhone). The script I create will most likely be posted in the Playground. I will make sure to link it in this article as well.

Update - March 15, 2010

I've accomplished pulling Illustrator art in to the canvas via XAML. It's somewhat limited, but still shows a majority of the vector artwork. AI Meshes and dotted lines do not work natively. Dotted lines can be implemented with some extra work, but I'm busy with some other things right now.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <pre>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.
  • E-Mail addresses are hidden with reCAPTCHA Mailhide.

More information about formatting options

Complete this form and then pat yourself on the back.