Almacenar y recuperar el estado del canvas

Hasta ahora solo has dibujado las formas usando el sistema de coordenadas por defecto y solo has modificado el tamaño del canvas según se necesitara. Pero tambien dispones de las transformaciones: formas más potentes para modificar como se realizan los dibujos como: el origen de coordenadas, girar, cambiar tamaño o realziar transformaciones personalizadas.

Una vez aplicas una transformación (o asignas un valor a una propiedad del lápiz) se seguirá dibujando con esa transformación o cambio de propiedades hasta que la deshagas. Para facilitar esta tarea dispnes de un par de métodos fundamentales:

save()

Guarda el estado actual de canvas en una pila LIFO, puedes verla como una lista en la que se guarda el estado del canvas cada vez que usas este método. Cada vez que llamas a este método se crea un nuevo elemento al final de esta lista.

 

restore()

Recupera el último estado del canvas almacenada y lo elimina de la lista. Importante: recupera el último estado guardado. Es decir lee la lista de estados guardados desde el final y cuando lee un elemento de esta lista lo elimina de la misma. Es como una pila de platos: el último plato lo dejas encima de la pila y cuando necesitas cojes ese último plato. De ahí el nombre pila LIFO: Las In First Out

Al guardar un estado del canvas almacenas las propiedades siguientes:

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

Además también contiene las transformaciones que se hayan aplicado y el cuadro de recorte (máscara) que se haya aplicado si se ha aplicado alguno

Como ves se almacena el estado completo del canvas para poderlo reproducir sin más que hacer un restore(). Esto facilita bastante la tarea pues permite deshacer operaciones sin tener que deshacer comandos. Por ejemplo si para un dibujo puedes cambiar color, relleno, grosor de linea, orientación y luego recuperar los valores previos con una sola instrucción.