Métodos save y restore
El contexto del <canvas> almacena lo que llamamos en ingles "the drawing state" y que podemos traducir como el estado del contexto.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| save() | context.save(); | Guarda el estado actual del canvas. | |
| restore() | context.restore() | Recupera el estado previamente guardado del canvas. |
Vea la chuleta con las propiedades y metodos() de canvas.
El estado del contexto puede ser manipulado a través de JavaScript, y recoge los valores actuales de lineWidth, strokeStyle, fillStyle, lineCaps, etc…
También recoge los valores de las entradas de la matriz actual de transformación.
Estos valores pueden ser guardados con el método save(), y pueden ser recuperados con el método restore().
Al guardar un estado, este se almacena encima de los anteriores en una pila y cuando llamamos el método restore(), este recupera el último estado guardado, lo quita de la pila y lo transforma en el actual estado del contexto.
En otras palabras: el último estado guardado es el primer recuperado. Veamos un ejemplo.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var X = canvas.width;
var Y = canvas.height;
ctx.fillStyle = "#333";
ctx.fillRect(0, 0, X, Y);
ctx.save() // guarda el 1° estado
ctx.fillStyle = "#999";
ctx.fillRect(15, 15, X - 30, Y - 30);
ctx.save(); // guarda el 2° estado
ctx.fillStyle = "#ccc";
ctx.fillRect(30, 30, X - 60, Y - 60);
ctx.save(); // guarda el 3° estado
ctx.fillStyle = "#eee";
ctx.fillRect(45, 45, X - 90, Y - 90);
ctx.restore(); // recupera el 3° estado
ctx.fillRect(60, 60, X - 120, Y - 120);
ctx.restore(); // recupera el 2° estado
ctx.fillRect(75, 75, X - 150, Y - 150);
ctx.restore(); // recupera el 1° estado
ctx.fillRect(90, 90, X - 180, Y - 180);
}
}