How do I resize a path already closed on an HTML5 canvas?

Question

I have a quadratic curve rendered on a canvas. I want to animate it by means of window.setInterval and changing it's dimensions (note not simply changing it's scale) thereafter.

How do I retain an editable reference to the path after calling context.closePath()?

Answer 1

I'd recommend that you maintained a reference to the path in a new Path object; that way you could modify x, y, points etc on the fly and then render it each animation step.

var testPath = new Path(100, 100, [[40, 40], [80, 80]]);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function Path(x, y, points)
{
    this.x = x;
    this.y = y;
    this.points = points;
}

function update()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'red';
    ctx.moveTo(testPath.points[0][0], testPath.points[0][1]);
    for (var i = 1; i < testPath.points.length; i++)
    {
        ctx.lineTo(testPath.points[i][0], testPath.points[i][1]);
    }
    ctx.stroke();
    testPath.points[1][1]++; // move down

    // loop
    requestAnimationFrame(update);
}

update();​

For some reason JSFiddle doesn't play nice with Paul Irish's requestAnimationFrame polyfill but it should work locally. I'd definitely recommend this over setInterval.

http://jsfiddle.net/d2sSg/1/