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.
Thanks