Cuando tenemos que hacer dibujos complejos es muy común que necesitemos almacenar el estado de algunas propiedades del canvas para luego recuperarlas. Estas dos actividades se logran mediante los métodos:
save() restore()
Los valores que se almacenan son strokeStyle, FillStyle, globalAlpha, LineCap, LineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor entre otras propiedades.
Tengamos en cuenta que si se llama dos veces en forma sucesiva al método save() para retornar al estado inicial debemos llamar dos veces al método restore().
Para ver su funcionamiento desarrollaremos un programa que muestre un cuadrado en color rojo, otro con un gradiente del rojo al azul y finalmente otro cuadrado rojo:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
lienzo.save();
var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
gradiente1.addColorStop(0,"rgb(255,0,0)");
gradiente1.addColorStop(1,"rgb(0,0,255)");
lienzo.fillStyle=gradiente1;
lienzo.fillRect(x,y,ancho,alto);
lienzo.restore();
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,30,30,30);
dibujarCuadradoGradiente(lienzo,70,30,30,30);
lienzo.fillRect(130,30,30,30);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
Dibujamos un cuadrado de color rojo:
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,30,30,30);
Llamamos a la función dibujarCuadradoGradiente:
dibujarCuadradoGradiente(lienzo,70,30,30,30);
La función dibujarCuadradoGradiente lo primero que hace es grabar el estado actual (save()) y luego configura nuevamente la propiedad fillStyle con un objeto de tipo LinearGradient. Finalmente luego de graficar el cuadrado restaura el estado actual (restore()):
function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
lienzo.save();
var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
gradiente1.addColorStop(0,"rgb(255,0,0)");
gradiente1.addColorStop(1,"rgb(0,0,255)");
lienzo.fillStyle=gradiente1;
lienzo.fillRect(x,y,ancho,alto);
lienzo.restore();
}