canvasを回転させる

canvasに正方形を描画して、その後、座標系を45傾け
た上で、もとの正方形を新しい座標系で書きなおしてみました。

<script>

  var canvas = document.getElementById("canvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(00,00,255)";

  context.fillStyle = "rgb(255,0,0)";

  context.strokeRect(100,100,50,50);
  context.translate(125,125);

  context.rotate( 45 * 3.14 * 2 / 360);

  context.translate(-124,-125);
  context.drawImage(canvas,99,99,52,52,99,99,52,52);