Canvas API: Salvando e Restaurando Estado com 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.