CanvasRenderingContext2D.save()

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

描画状態

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

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

構文

void ctx.save();

例

描画状態の保存

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

HTML

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