Question

I was just wondering if it is possible to transform between two shapes using just canvas.

ie: star to a cirle.

this is what I have so far:

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

ctx.translate(30, 30);
ctx.rotate((Math.PI * 1 / 10));

for (var i = 5; i--;) {
    ctx.lineTo(0, length);
    ctx.translate(0, length);
    ctx.rotate((Math.PI * 2 / 10));
    ctx.lineTo(0, -length);
    ctx.translate(0, -length);
    ctx.rotate(-(Math.PI * 6 / 10));
}

ctx.lineTo(0, length);
ctx.closePath();
ctx.fill();

Answer 1

Here is a basic transition in pure canvas. Using arcs instead of lines is left as an exercise for the reader 😉

http://jsfiddle.net/pD9CM/

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

var max = 50;
var inset = 0;
var direction = +1;

function draw() {

    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();

    var i = 11
    while (i--) {
      var angle = (i/10) * Math.PI * 2;
      var distance = (i % 2 === 0) ? (max - inset) : max;
      var pt = point(angle, distance);
      if (i === 0) ctx.moveTo(pt.x + 150, pt.y + 150);
      else ctx.lineTo(pt.x + 150, pt.y + 150);
    }
    ctx.fill();  

    if (inset < 0 || inset > 30) direction = -direction;
    inset += direction;
}

function point(angle, distance) {
  return {
    x: Math.cos(angle) * distance,
    y: Math.sin(angle) * distance
  };
}

setInterval(draw, 20);