CanvasRenderingContext2D.save()

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

描画状態

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

構文

void ctx.save();

描画状態を保存する

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

HTML

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

JavaScript

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

// Save the default state
ctx.save();

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

// Restore the default state
ctx.restore();

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

結果

仕様

仕様 状態 コメント
HTML Living Standard
CanvasRenderingContext2D.save の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
saveChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報