canvasのsaveとrestoreについて

Question

###前提・実現したいこと
参考書に書いてあるサンプルコードがわかりません。解説をお願いします。
###該当のソースコード

function drawpicture(c){
   var pict =new Image();
   pict.src = "sample_blue.jpg"
   pict.onload = function(){
     c.save();
     c.drawImage(pict,250,250,100,100,350,350,100,100);
     c.fillText("drawPicture",350,340);
     c.restore();
  };
}

###疑問点
save()はその時のcanvasの状態を記録し、restore()はその記憶した状態を復元すると認識するため、上記の関数を実行した場合なにも表示されないように思えるのですが、私のsave()とrestore()に対する認識が間違っているのでしょうか？

Answer 1

#1

ctx.save(); //初期状態を保存
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
ctx.restore(); //初期状態に復元
ctx.fillRect(10, 10, 100, 100); //初期状態の黒で四角を描く

#2

ctx.fillStyle = "green";
ctx.save(); //緑のfillStyleを保存
ctx.fillRect(10, 10, 100, 100);
ctx.restore(); //緑のfillStyleを持った状態に復元
ctx.fillRect(10, 10, 100, 100); //緑で四角を描く

保存される状態は以下の通り

(日本語訳が存在しないらしく、言語切り替えで選べませんでした)
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save#Drawing_state

Drawing state

The drawing state that gets saved onto a stack consists of:

The current transformation matrix.
The current clipping region.
The current dash list.
The current values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

Answer 2

canvasすなわちCanvasRenderingContext2Dオブジェクトのsave/restoreメソッドが管理している「canvas要素の状態」とは, fillStyleやstrokeStyle等のグラフィックの描画スタイルに関わるプロパティを指しており, drawImageやfillメソッド等により既に描かれているグラフィックの状態は含まれません.

save/restoreで管理できるプロパティの一覧はHayatoKamonoさんがリストアップしているとおりです.

Comments

[defghi1977]

なので, 参考書のサンプルコードは全く意味を成していません.

[meron-pan]

sava()で保存される内容は限定されているのですね。ありがとうございます。