JavaScriptのCanvasのsave()とrestore()関数の使い方

キャンバスの状態を保存するsave()関数と、
保存した状態を復元するrestore()関数の使い方をやっていきます。

以下の順序でやります。

このような流れでJavaScriptを記述しました。一番最後にCodePenを表示しますので、そこで確認できます。

（１）塗りつぶしの色と、座標系を保存

  ctx = canvas.getContext("2d");
  ctx.fillStyle = "#00ffff";

  ctx.beginPath();
  ctx.arc(0, 0, 30, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();
  ctx.save();

まずfillStyle = “#00ffff”;で、シアン色の塗りつぶし色を設定しています。
座標系は何もしないデフォルト状態なので左上隅の座標が(0,0)となっています。

この状態で、円を1つ描画します。・・・①

1つ目は(0,0)を中心とした半径30の円（左上隅が0，0なので見切れてしまう）

このタイミングで、ctx.save()を使って描画状態を保存します。

（２）塗りつぶしの色と、座標系を移動

  ctx.fillStyle = "#ff99cc";
  ctx.translate(200, 50);
 
  ctx.beginPath();
  ctx.arc(0, 0, 40, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();

次に、fillStyle = “#ff99cc”;で、塗りつぶしをピンク色に設定します。
また、translate(200,50)で、座標軸を右へ200下へ50移動させました。

ここで(0,0)を中心とした半径40のピンクの円を描画します。・・・②

（３）塗りつぶしの色と、座標系を元に戻す

 ctx.restore();
  
  ctx.beginPath();
  ctx.arc(200, 50, 30, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();

ctx.restore();を使って描画状態を復元します

これにより塗りつぶしの色がシアン色になって、座標軸が元に戻った（左上が0,0）はずです。

ここで(200,50)を中心とした半径30の少し小さめの円を描画しました・・・③

すると、色も座標も元に戻ったのがわかります。

See the Pen
canvas-save-restore by pghappy (@pghappy)
on CodePen.