お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

おっしゃ!!!セーブポイントやんけ!!!

イメージの操作・・・です。

context.save()

現在の描画状態を保存します。
保存出来るものは以下の通りです。

  1. 現在の変換マトリックス
  2. 現在の切り抜き領域
  3. strokeStyle
  4. fillStyle
  5. globalAlpha
  6. lineWidth
  7. lineCap
  8. lineJoin
  9. miterLimit
  10. shadowOffsetX
  11. shadowOffsetY
  12. shadowBlur
  13. shadowColor
  14. globalCompositeOperation
  15. font
  16. textAlign
  17. textBaseline

なので、セーブポイントではないです。
消えてしまったものを戻そうとするのではないのでご注意ください
あくまでも 設定A→設定セーブ→描画→設定B→描画→設定リストア→描画(設定Aの設定)
なのです。

context.restore()

saveで保存した描画状態に戻します。

  var canvas1 = document.getElementById('canvas01'),
      intervalObj = "",
      context1 = canvas1.getContext('2d');
  canvas1.width = 200;
  canvas1.height = 200;

  //ここに具体的な描画内容を指定する
  //塗りスタイルに青色を指定する
  context1.fillStyle = "rgb(0, 0, 255)";
  //その描画状態を保存する
  context1.save();

  //塗りスタイルに赤色を指定して、塗りつぶしの四角形を描く
  context1.fillStyle = "rgb(255, 0, 0)";
  context1.fillRect(10,10,30,30);

  //描画状態を復元して、塗りつぶしの四角形を描く
  context1.restore();
  context1.fillRect(150,150,30,30);