CanvasRenderingContext2D.save()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

Learn more
See full compatibility

CanvasRenderingContext2D.save() - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.

Состояние чертежа

Состояние чертежа, которое сохраняется в стеке, состоит из:

Текущая матрица преобразования.
Текущая область отсечения.
The current dash list.
Текущие значения следующих атрибутов: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, 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);