HTML5 Canvas Transformation Matrix

Viewed 26096

I don't understand what the Transformation Matrix is and how to work with it.

The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canvas.jar)

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

I would like to pass in arguments for setTransform() to draw on any part of my canvas, however I don't understand how to use it at all.

4 Answers
Related