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>
<title>Título de la página</title>
<meta charset="UTF-8">
<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>
El resultado en el navegador al cargar esta página es:
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();
}