Search code examples
javascriptgraphicscanvasadobe-illustrator

JavaScript <canvas> draw scaled image

The amazing Illustrator plugin Ai->canvas exports arbitrary complex Illustrator images to Javascript code that draws on <canvas>. For example, this is the code for a green square 150x150

function draw(ctx) {

  // layer4/Path
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(150.0, 150.0);
  ctx.lineTo(0.0, 150.0);
  ctx.lineTo(0.0, 0.0);
  ctx.lineTo(150.0, 0.0);
  ctx.lineTo(150.0, 150.0);
  ctx.closePath();
  ctx.fillStyle = "rgb(0, 255, 0)";
  ctx.fill();
  ctx.restore();
}

This is a stupid example because drawing a square is better done with a rectangle, but anyway, for complex images, this is invaluable. The problem is scaling.

How can I transform a generic draw function output by Ai->canvas in order to accept a scale factor? This square example is pretty straight forward, but I'd like something more generic to be applied to a Javascript function drawing on canvas (with arcs, circles, bezier curves...). Thanks

Solution

  • One option is to use the scale function of the canvas, e.g.:

    ctx.scale(xFactor, yFactor);

    More here