# Baseie mudanças de desempenho no Canvas em evidências

> Perfille um jogo 2D em Canvas com cenas repetíveis e reduza operações de desenho custosas somente depois de medir onde o tempo está sendo gasto.

- URL: https://oneshotgems.ai/pt-BR/topics/canvas-game-performance
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

A lentidão no Canvas pode vir do desenho, da simulação, da decodificação de imagens ou do trabalho de layout ao redor do Canvas. Tentar adivinhar otimizações costuma dificultar a manutenção do código sem corrigir a parte lenta. Comece com uma cena que reproduza o travamento de forma confiável, use as ferramentas de desempenho do navegador para localizar o intervalo mais ocupado e mude uma categoria de trabalho por vez. O objetivo não é buscar um máximo teórico, mas remover o gargalo visível em uma situação que você consiga reproduzir.

## Crie uma cena de estresse repetível

Crie um estado de teste com um número conhecido de objetos em movimento, efeitos sobrepostos e rótulos de texto. Capture uma gravação ou semente fixa para que cada execução apresente aproximadamente o mesmo trabalho. Compare uma linha de base de cena vazia com uma cena lotada e, em seguida, inspecione se o tempo é gasto em atualizações de JavaScript, desenho de tela, decodificação de imagem ou trabalho de estilo e layout.

Se o desenho for o maior custo, teste agrupar caminhos semelhantes, reduzir mudanças de estado desnecessárias ou renderizar apenas as regiões que mudaram. Se a lógica de atualização for o gargalo, use o profiler para analisar verificações de colisão e iteração de objetos. O guia de otimização de Canvas da MDN apresenta essas técnicas como opções a avaliar, não como soluções universais que garantem velocidade.

## Mude um custo e confira o resultado

Escolha um custo suspeito, como redesenhar repetidamente um fundo estático. Armazene esse fundo em cache em um Canvas fora da tela e compare antes e depois usando a mesma cena. Confira a imagem em tamanhos diferentes e depois de redimensionar: o cache pode ficar incorreto se usar dimensões antigas ou escalar o texto de outra forma.

Registre o dispositivo, o navegador, a cena e a ação usados na comparação. O resultado em uma máquina ajuda a diagnosticar aquela execução, mas não determina o desempenho em todos os navegadores e dispositivos. Teste de novo a interação original: uma otimização que melhora uma cena sintética ainda pode piorar a sensação dos controles em outros pontos.

## Perguntas

**Devo redesenhar apenas os pixels alterados?** Depende da complexidade da cena e do custo dos redesenhos completos. A renderização parcial adiciona contabilidade e pode criar pixels obsoletos em torno de objetos em movimento, portanto compare ambas as abordagens com a mesma cena reproduzível.

**Dicas para agrupar operações no Canvas garantem melhora?** Não. São hipóteses úteis para testar. Meça no navegador e na carga de trabalho desejados; mantenha a mudança somente se ela melhorar o gargalo observado sem prejudicar a renderização.

## Siga sua curiosidade

- [Defina a resolução do Canvas para deixar a arte do jogo nítida](https://oneshotgems.ai/pt-BR/topics/canvas-pixel-density): Equilibre a resolução da tela, a proporção de pixels do dispositivo, o uso de memória e o custo de desenho quando um jogo precisa parecer nítido nas telas.
- [Avalie o desempenho do jogo no navegador de maneira confiável](https://oneshotgems.ai/pt-BR/topics/measuring-game-performance): Crie um teste de desempenho repetível para jogos de navegador, separe os sintomas dos quadros das causas e compare as alterações nas cenas correspondentes.

## Leitura complementar

- [MDN: otimização do Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/canvas-game-performance