title: HTML5 Canvas Transformation Matrix
body: <p>I don't understand what the Transformation Matrix is and how to work with it.</p>
  
  <p>The following will draw a circle at 0, 0 of my canvas: <em>(generated from an svg converted with svg2canvas.jar)</em></p>
  
  <pre><code>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();
          }
  </code></pre>
  
  <p>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.</p>