“Este post é o primeiro de uma série sobre HTML5 Canvas. Neste artigo explicarei como funcionam os métodos context.save() e context.restore().
Estes métodos são responsáveis para salvar e restaurar o estado do contexto de renderização. Mas o que significa isto?
O que é um estado em Canvas? Primeiro, é necessário saber o que é um estado. A resposta simplificada é: Tudo que não é desenhado!
A API do Canvas providencia um conjunto de métodos que podem ser distinguidos entre métodos que pintam no quadro (o Canvas) e métodos auxiliares. Uma grande parte dos métodos auxiliares são usados para definir a aparência de itens pintados.
Métodos como strokeStyle, fillStyle, globalAlpha, lineWidth, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline, etc. modificam o estado do contexto. Tambem considerado como um estado é a matrix de transformação que pode ser alterado usando os métodos translate, rotate, scale e setTransform. Uma outra forma de estado é a região de corte (Clipping region) modificado via clip. Todos os objetos modificados por estes métodos fazem parte do estado do contexto que pode ser empilhado.
Leia mais em: [dextra.com.br/…]” [referência: dextra.com.br]