Salvando e Restaurando o Estado do Canvas - JavaScript

Ao utilizar métodos como fillRect() ou fillText(), pode ser necessário configurar previamente a cor de preenchimento, a fonte e outras propriedades globalmente para todo o objeto. Para salvar essas configurações, o objeto de contexto oferece o método save(). Cada vez que esse método é chamado, as configurações atuais do canvas são armazenadas em uma pilha e salvas. Para restaurar as configurações salvas posteriormente, utiliza-se o método restore(). Esse processo de salvar e restaurar configurações pode ser útil quando precisamos aplicar configurações globais a uma parte dos elementos e configurações locais a outra parte.

Vamos considerar o seguinte exemplo:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Exemplo de Canvas</title>
    </head>
    <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

        // Desenhando um retângulo com as configurações padrão
        // A cor de preenchimento padrão é preto
        context.fillRect(0, 0, 150, 150);
        // Salvando o estado atual (vamos chamá-lo de estado 1)
        context.save();

        // Alterando as configurações - definindo a cor de preenchimento como verde
        context.fillStyle = '#7ed6df';
        context.fillRect(15, 15, 120, 120); // Desenhando um retângulo com as novas configurações
        // Salvando o estado atual (vamos chamá-lo de estado 2)
        context.save();

        // Alterando as configurações - definindo a cor de preenchimento como vermelho
        context.fillStyle = '#ff7979';
        context.fillRect(30, 30, 90, 90); // Desenhando um retângulo com as novas configurações

        context.restore(); // Carregando o estado anterior (estado 2)
        context.fillRect(45, 45, 60, 60); // Desenhando um retângulo com as configurações anteriores (cor verde)

        context.restore(); // Carregando o estado anterior (estado 1)
        context.fillRect(60, 60, 30, 30); // Desenhando um retângulo com as configurações anteriores (cor preta)
    </script>
    </body>
</html>

Salvando e restaurando o estado do canvas em JavaScript

Nesse exemplo, inicialmente é criado um quadrado de 150x150 pixels usando as configurações padrão (com a cor de preenchimento preta). Ao chamar save(), essas configurações padrão são salvas na pilha. Em seguida, a cor de preenchimento é alterada para #7ed6df (um tom de verde), e é criado um quadrado de tamanho ligeiramente menor, deslocado horizontal e verticalmente. A segunda chamada ao save() também salva essas configurações na pilha. Depois, a cor de preenchimento é alterada para #ff7979 (um tom de vermelho), e outro quadrado, menor ainda, é desenhado.

Ao chamar restore(), as configurações mais recentes salvas na pilha são carregadas, ou seja, aquelas onde a cor de preenchimento foi definida como verde (por isso o quadrado desenhado em seguida tem essa cor). Da mesma forma, uma segunda chamada ao restore() carrega as configurações iniciais, onde a cor preta é aplicada.