CanvasRenderingContext2D.save()

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 (en-US), fillStyle (en-US), globalAlpha (en-US), lineWidth (en-US), lineCap, lineJoin (en-US), miterLimit (en-US), lineDashOffset (en-US), shadowOffsetX (en-US), shadowOffsetY (en-US), shadowBlur (en-US), shadowColor (en-US), globalCompositeOperation (en-US), font (en-US), textAlign (en-US), textBaseline (en-US), direction (en-US), imageSmoothingEnabled (en-US).

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

<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);

Resultado

• La interfaz donde se define este método: CanvasRenderingContext2D
• CanvasRenderingContext2D.restore() (en-US)