[HTML][JavaScript]canvas状態を保存と復元

どうやらcanvasの状態を保存して復元することができるようだ。

保存は、saveメソッド、復元はrestoreメソッドで実現することができる。

<script>
jQuery(function($){
  var canvas = document.getElementById("hoge");
  var context = canvas.getContext("2d");

  context.fillStyle = 'rgb(255, 0, 0)';
  context.fillRect(0,0,100,100);
  context.save();

  $('#restore').on('click',function(e){
    context.restore();
  });

  $('#draw').on('click',function(e){
    context.fillRect(0,0,100,100);
  });

  context.fillStyle = 'rgb(0, 0, 0)';

});
</script>
<canvas id="hoge" width="200" height="200" style="border:solid 1px red;"></canvas>
<input type="button" value="restore" id="restore">
<input type="button" value="draw" id="draw">

上の例では、restoreボタンを押す前に、drawボタンを押すと黒色で描画されるが、restoreボタンを押した後、drawを押すと赤色で描画される。