CanvasRenderingContext2D.save()

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

描画状態

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

構文

js

void ctx.save();

例

描画状態の保存

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

HTML

html

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

JavaScript

js

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

関連情報