CanvasRenderingContext2D.save()

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Ver la compatibilidad completa
Más información

El método CanvasRenderingContext2D.save() del API Canvas 2D guarda el estado completo del canvas añadiendo el estado actual a una pila.

El estado del dibujo

El estado del dibujo que se almacena en una pila consiste en los siguientes elementos:

La matriz de transformación actual.
La región de recorte actual.
La lista de punteado actual.
Los valores actuales de los siguientes atributos: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

Sintaxis

void ctx.save();

Este ejemplo usa el método save() para guardar el estado por defecto y el método restore() para restaurarlo luego, de tal manera que luego se puede dibujar el segundo rectángulo con el estado por defecto.

HTML

html

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

JavaScript

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

// Guardar el estado por defecto
ctx.save();

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

// Restaurar el estado por defecto
ctx.restore();

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