Building AI2Canvas output with jCanvas.js

Question

I'm using Mike Swanson's AI > Canvas plugin for Illustrator (found here) and it's great for exporting an Illustrator creation to an HTML5 Canvas element, but the exported JS that builds the Canvas element builds it in a way that is read-only.

I'm trying to figure out a streamlined way to convert the AI2Canvas exported JS into jCanvas JS so that I'm able to dynamically update elements within the canvas (e.g. Update text, change colors, etc).

The following 2 comparisons are for a basic rectangle:

AI2Canvas exports to something like:

// layer1/Rectangle
ctx.save();
ctx.beginPath();
ctx.moveTo(1000.8, 1000.0);
ctx.lineTo(0.8, 1000.0);
ctx.lineTo(0.8, 0.0);
ctx.lineTo(1000.8, 0.0);
ctx.lineTo(1000.8, 1000.0);
ctx.closePath();
ctx.fillStyle = "rgb(237, 28, 36)";
ctx.fill();

jCanvas would be something like:

$('canvas').drawLine({
  name: 'firstLine', // this allows me to access later for edits
  closed: true,
  fillStyle: "rgb(237, 28, 36)",
  x1: 0, y1: 1000,
  x2: 0, y2: 0,
  x3: 1000, y3: 0,
  x4: 1000, y4: 1000
});

In this instance, a basic rectangle, converting myself is not difficult. Where it gets trickier is when AI2Canvas exports out to something that includes BezierCurves which is not as easy to manually convert over to jCanvas properties.

I'm also open to something besides AI2Canvas & jCanvas -- I just need to to figure out the best way to get from something designed in Illustrator into a <canvas> element that I can then access specific elements later with JS.

Answer 1

Alright, after digging more into the jCanvas code & docs I figured out how to dump the raw output from AI2Canvas into jCanvas.

jCanvas .draw() has a function property that lets you pass in regular canvas drawing code and it will create a layer based off this. There's some caveats though:

• You have to set the fill color inside the function call (see example below)
• If you update the fill color via JS later the function call overrides any property updates made to the object
• Make sure layer: true is set so that the shape is created as a layer that jCanvas can access

Then, we just pass a unique name to the Object so we can reference it later and make any adjustments we want.

Here's an example of building a single shape layer with jCanvas using the output from AI2Canvas:

$('canvas').draw({
        layer: true,
        name: 'unique_test_name',
        fillStyle: "red",
        fn: function(ctx, shape) {
          ctx.beginPath();
          ctx.moveTo(970.6, 984.3);
          ctx.lineTo(584.2, 984.3);
          ctx.bezierCurveTo(580.9, 984.3, 578.2, 981.6, 578.2, 978.3);
          ctx.lineTo(578.2, 931.0);
          ctx.bezierCurveTo(578.2, 927.7, 580.9, 925.0, 584.2, 925.0);
          ctx.lineTo(970.6, 925.0);
          ctx.bezierCurveTo(973.9, 925.0, 976.6, 927.7, 976.6, 931.0);
          ctx.lineTo(976.6, 978.3);
          ctx.bezierCurveTo(976.6, 981.6, 973.9, 984.3, 970.6, 984.3);
          ctx.closePath();
          // this next one is important. must reference this shape's fillStyle so that color appears on initial draw, and will change color later when you change this shape's color via JS
          ctx.fillStyle = shape.fillStyle; 

          ctx.fill();
        }
      });

And then updating some property like the fill color:

$('canvas').setLayer('unique_test_name', { fillStyle: 'green' }).drawLayers();