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 July 2015.
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();
Ejemplos
Guardando el estado del dibujo
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
js
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
Especificaciones
| Specification |
|---|
| HTML Standard # dom-context-2d-save-dev |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- La interfaz donde se define este método:
CanvasRenderingContext2D CanvasRenderingContext2D.restore()