Canvas: o que é, métodos de renderização e como funciona

O que é Canvas?

Canvas é uma área retangular na tela onde um programa realiza renderização pixel a pixel usando um contexto de desenho. O conceito originou-se nos padrões web HTML5 como parte da especificação WHATWG em 2004 e desde então se tornou a base para gráficos em todas as plataformas.

A principal diferença entre Canvas e abordagens declarativas (SVG, componentes de UI) é que o Canvas não armazena uma cena. Após a renderização, os pixels são fixados e, para alterar a imagem, o programa deve apagar e redesenhar a área necessária. Isso fornece desempenho máximo em animações e consumo mínimo de memória para armazenamento da cena.

O Canvas suporta dois tipos de contexto: 2D para gráficos planos e WebGL / WebGL2 para renderização tridimensional através de aceleração de hardware GPU. De acordo com Statista (2025), a Canvas API é usada em 89% dos jogos de navegador e 67% dos editores web.

Para desenvolvimento móvel, o Canvas é adaptado em cada plataforma: no Android através da classe Canvas, no iOS através de Core Graphics e Metal, no .NET MAUI através de Microsoft.Maui.Graphics. O princípio único — contexto de desenho, sistema de coordenadas e pilha de transformações — permanece inalterado independentemente da plataforma.

Elementos do Canvas

A tela é uma matriz bitmap de tamanho fixo especificada em pixels. Cada pixel armazena um valor RGBA — canais vermelho, verde, azul e transparência alfa. O sistema de coordenadas do Canvas começa no canto superior esquerdo, onde o eixo X vai para a direita e o eixo Y para baixo.

O tamanho da tela é determinado por dois parâmetros: largura e altura em pixels. É importante distinguir os atributos width e height da tela das dimensões CSS — o CSS pode dimensionar a área visível, mas a resolução interna permanece definida pelos atributos. A incompatibilidade desses parâmetros leva ao desfoque da imagem.

No Android, o tamanho do Canvas geralmente corresponde ao tamanho da View ou Bitmap no qual é criado. Quando onDraw() é chamado, um Canvas já configurado para o tamanho da view é passado — o desenvolvedor não precisa definir as dimensões manualmente.

Como funciona o Canvas?

Canvas opera através de um contexto de desenho — um objeto que armazena o estado atual: cor de preenchimento, espessura da linha, transformações e caminho. Todas as chamadas de métodos de desenho são aplicadas a este estado e modificam a matriz bitmap da tela.

O processo de renderização segue um pipeline: limpar área → configurar estado → construir caminho → traçar ou preencher. Durante a animação, este ciclo se repete 60 vezes por segundo, exigindo otimização de cada etapa para manter a suavidade.

O Canvas usa modo de renderização imediata, onde cada comando de desenho é executado imediatamente. Ao contrário do modo retido (SVG ou DOM), o Canvas não armazena uma lista de objetos. Isso reduz o consumo de memória mas complica a interatividade — o desenvolvedor deve implementar a detecção de hit e o redesenho por conta própria.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

No exemplo acima, obtemos o contexto 2D, definimos a cor de preenchimento, desenhamos um retângulo, então configuramos a fonte e exibimos texto. Todas as operações são realizadas em uma tela do tamanho especificado nos atributos width e height do elemento.

A pilha de estados do Canvas permite salvar e restaurar parâmetros de desenho. O método save() coloca o estado atual na pilha, restore() restaura o anterior. Isso é conveniente para transformações em cascata quando é necessário aplicar deslocamento ou rotação a um grupo de elementos sem afetar os demais.

Métodos principais da Canvas API

Canvas API fornece cerca de 40 métodos para renderizar primitivas, imagens, texto e gerenciar estilos. O conjunto básico inclui métodos para trabalhar com retângulos, caminhos, arcos e texto. Vamos examinar os grupos principais de métodos.

Desenho de primitivas

Retângulos são as primitivas mais rápidas do Canvas. O método fillRect(x, y, w, h) desenha um retângulo preenchido, strokeRect() desenha apenas a borda, clearRect() limpa a área. Para polígonos complexos, usa-se o objeto Path2D, que pode ser reutilizado entre quadros.

Trabalho com imagens

drawImage() é o método principal para renderizar imagens bitmap no Canvas. O método aceita três conjuntos de parâmetros: cópia simples, dimensionamento e recorte com dimensionamento. A imagem pode ser carregada de HTMLImageElement, SVGImageElement ou outro Canvas.

Para desenvolvimento móvel, é crítico que drawImage() funcione com Bitmap no Android e UIImage no iOS. As implementações da plataforma usam aceleração de hardware quando a imagem e o Canvas estão na mesma memória de textura da GPU. Se a imagem não corresponder ao perfil de cor, pode ocorrer perda de desempenho devido à conversão.

Animação no Canvas

requestAnimationFrame() é o mecanismo padrão para animação no Canvas. Ao contrário do setInterval, este método sincroniza a renderização com a taxa de atualização da tela (geralmente 60 FPS). Quando a guia está em segundo plano, o navegador interrompe as chamadas, economizando bateria.

Para otimizar a animação do Canvas, minimize a área de redesenho: em vez de limpar toda a tela, use clearRect() apenas na região alterada. Agrupar elementos em uma única camada e armazenar em cache partes estáticas em um Canvas offscreen reduz a carga no pipeline de renderização.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

O loop de animação limpa a tela, atualiza a posição do objeto e o redesenha. requestAnimationFrame garante suavidade e pausa automática quando a guia é ocultada, economizando recursos do dispositivo.

Canvas no desenvolvimento móvel

Canvas em plataformas móveis é implementado de forma diferente, mas baseia-se na ideia comum de uma tela programática. No Android, a classe Canvas faz parte do sistema gráfico, passada para o método onDraw(Canvas) de qualquer View. No iOS, o equivalente é o Core Graphics com o contexto CGContext.

Canvas no Android

Android Canvas funciona em conjunto com Bitmap ou SurfaceView. Ao criar Canvas via Bitmap, a renderização é feita na memória, enquanto via SurfaceView — diretamente na tela com aceleração de hardware. A partir da API 14+, o Canvas usa HWUI — um acelerador de hardware que traduz comandos de desenho para OpenGL ou Vulkan.

Os principais métodos do Android Canvas incluem drawBitmap(), drawCircle(), drawLine() e drawPath(). Todos os métodos aceitam Paint — um objeto que controla o estilo: cor, espessura, efeitos de suavização. De acordo com Google I/O (2024), o Canvas no HWUI mostra um ganho de desempenho de até 40% em comparação com a renderização por software.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

No Android, o Canvas usa aceleração de hardware por padrão a partir da API 14+. Para gráficos complexos, recomenda-se SurfaceView ou TextureView, que alocam uma camada separada para renderização em uma thread de fundo. Isso evita o bloqueio da thread de UI durante animações intensivas.

Canvas no iOS

Core Graphics é o framework da Apple para gráficos raster e vetoriais, equivalente ao Canvas. O contexto CGContext fornece métodos para desenhar linhas, curvas, gradientes e sombras. No SwiftUI, o Canvas está disponível através da estrutura Canvas, adicionada no iOS 15.

O SwiftUI Canvas usa GraphicsContext — um wrapper type-safe sobre Core Graphics. O desenvolvedor trabalha com GraphicsContext, que suporta transformações, camadas e símbolos. Ao contrário do UIKit, o SwiftUI Canvas lida automaticamente com telas Retina e tipos dinâmicos.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

O SwiftUI Canvas é caracterizado por sintaxe declarativa e otimização automática de renderização. O framework determina quais partes da tela precisam ser redesenhadas quando o estado muda. GraphicsContext suporta camadas através do método drawLayer, simplificando a criação de gráficos multicamadas.

Desempenho do Canvas

O desempenho do Canvas depende de três fatores: área de redesenho, número de chamadas de desenho e complexidade das operações. Cada chamada de método de desenho é um comando que passa por um pipeline: a CPU forma o comando, a GPU realiza a rasterização.

A regra principal de otimização é minimizar o número de chamadas. Em vez de desenhar 1000 pontos individuais, use um caminho com 1000 segmentos — uma chamada stroke() em vez de 1000. A segunda regra é armazenamento em cache de estáticos: mova elementos inalterados para um Canvas offscreen e copie-os via drawImage().

Ferramentas de perfil: Chrome DevTools Performance para web, GPU Inspector para Android e Instruments para iOS. De acordo com Google Chrome Developers (2025), 70% dos problemas de desempenho do Canvas são causados por redesenho excessivo e falta de cache de camadas.

Para dispositivos móveis, a economia de bateria é crítica. A renderização excessiva sobrecarrega a GPU e reduz o tempo de operação. Use o método willBePresented() no Android e displayLink no iOS para sincronizar com a taxa de atualização da tela.

Recursos avançados do Canvas

Canvas moderno foi além da simples renderização 2D. WebGL baseado no CanvasContext permite renderizar gráficos tridimensionais com aceleração de hardware. OffscreenCanvas move a renderização pesada para Web Workers sem bloquear a thread de UI.

WebGL através do Canvas

WebGL é um contexto do Canvas que fornece acesso ao OpenGL ES a partir do navegador. Em vez de fillRect(), o desenvolvedor escreve shaders em GLSL e carrega geometria em buffers. De acordo com Statista (2025), 92% dos navegadores móveis suportam WebGL 2.0, tornando o Canvas a base para jogos web e visualizações 3D.

O Canvas como contêiner para WebGL simplifica a integração de gráficos 2D e 3D em um único aplicativo. Por exemplo, uma cena 3D é renderizada via WebGL, enquanto a sobreposição de UI é renderizada via contexto 2D da mesma tela. A renderização mista requer gerenciamento da ordem z e sincronização das taxas de quadros.

OffscreenCanvas

OffscreenCanvas é uma API para transferir a renderização para uma thread de fundo. Ao contrário do Canvas normal, o OffscreenCanvas não está vinculado ao DOM e pode ser usado em um Web Worker. Isso permite realizar cálculos gráficos complexos em paralelo com a thread principal sem quedas de FPS.

A transferência de um quadro completo de um Worker para a thread principal ocorre via transferControlToOffscreen() e commit(). De acordo com Chrome Platform Status (2025), o OffscreenCanvas é suportado em 87% dos navegadores e é recomendado para aplicações com renderização intensiva — editores gráficos, gráficos e animações.