構文

context . save()

現在の状態をスタックの最後に加えます。

context . restore()

スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。

仕様

コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます：

• 現在の変換マトリックス
• 現在のクリップ領域
• 次の属性の現在の値： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、beginPath() メソッドを使ってリセットするまで存在し続けます。現在のビットマップは canvas のプロパティであり、コンテキストではありません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#the-canvas-state

サンプル

このサンプルでは、まず3種類の描画状態を save() メソッドを使ってスタックに追加します。このサンプルで使っている描画状態の要素は、fillStyle と globalAlpha です。

次に、中心座標を左から右へずらしながら3つの円を描画しました。それぞれの円を描画する前に、スタックに保存された描画状態を restore() メソッドで取出し、コンテキストに適用しました。

上図の通り、スタックに保存された描画状態が、それぞれの円に適用されて描画されます。canvas の描画状態はスタック方式で維持されているため、最後に保存された描画状態から順に適用される点に注意してください。

/* 描画状態を3つ保存する */
var colors = new Array("red", "blue", "green");
var alphas = new Array(0.2, 0.5, 0.8);
for(var i=0; i<=2; i++) {
  ctx.fillStyle = colors[i];
  ctx.globalAlpha = alphas[i];
  ctx.save();
}
/* 保存した描画状態を適用しながら矩形を3つ描く */
for(var i=0; i<=2; i++) {
  ctx.restore();
  ctx.beginPath();
  ctx.arc( (i+1) * 25, 50, 20, 0, Math.PI*2, false);
  ctx.fill();
}

[save() / restore() メソッドの実際のサンプル]

ブラウザ対応状況

ExplorerCanvas 0002 の場合は、描画状態に適切に保存できない属性があります。前述の例では、globalAlpha 属性の値が正しく保存されません。