CanvasRenderingContext2D.save()

CanvasRenderingContext2D.save() はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。

描画状態

スタックに保存される描画状態には、以下のものが含まれます。

現在の変形行列。
現在のクリッピング領域。
現在の点線リスト。
strokeStyle、 fillStyle、globalAlpha (en-US)、lineWidth (en-US)、lineCap、lineJoin (en-US)、miterLimit (en-US)、lineDashOffset (en-US)、shadowOffsetX (en-US)、shadowOffsetY (en-US)、shadowBlur (en-US)、shadowColor (en-US)、globalCompositeOperation、font、textAlign、textBaseline、direction、imageSmoothingEnabled の現在の値。

構文

void ctx.save();

例

描画状態の保存

この例は、save() メソッドを使用して既定の状態を保存し、 restore() を使用して復元しているため、既定の状態で長方形を描画できます。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 既定の状態を保存
ctx.save();

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

// 既定の状態を復元
ctx.restore();

ctx.fillRect(150, 40, 100, 100);

結果

仕様書

Specification
HTML Standard # dom-context-2d-save-dev

ブラウザーの互換性

BCD tables only load in the browser