html5 canvas座標系の変換

html5 canvasのcontextオブジェクトのsave()とrestore()メソッドを使って座標系変換処理を示します。

使い関数：
context.save();
context.translate(100, 0);
...
context.restore();

サンプル：
http://html5next.appspot.com/canvas4.html

ソース：
<script type="text/javascript">
function formload()
{
 try
 {
  var objCanvas = document.getElementById("cvs01");
  var context = objCanvas.getContext("2d");

  // Change fill color to brown 
  context.fillStyle = '#009999'; 
  // 元の座標系  
  context.fillRect(10, 10, 10, 10);

  context.save();
  context.translate(100, 0); 
  // 新しい座標系  
  context.fillStyle = '#990000'; 
  context.fillRect(10, 10, 10, 10);
  context.restore();

  // 元の座標系  
  context.fillStyle = '#009999'; 
  context.fillRect(10, 30, 10, 10);

  // Legend描画 
  context.fillStyle = '#009999'; 
  context.fillRect(10, 60, 10, 10);
  context.fillStyle = '#990000'; 
  context.fillRect(10, 90, 10, 10);
  
  context.font = "16px impact"; 
  context.fillStyle = 'black'; 
  context.fillText('元の座標系', 30, 70, 400);
  context.fillText('新たな座標系', 30, 100, 400); 
 }
 catch(e)
 {
  alert(e.description);
 }
}
</script>