Tag HTML <canvas>

A tag <canvas> é um dos elementos HTML5. Ela define uma área na página web onde podemos criar diferentes objetos, imagens, animações e composições fotográficas por meio de scripts (geralmente JavaScript). É necessário utilizar um script para desenhar gráficos, pois a tag <canvas> é apenas um contêiner para gráficos.

Ao trabalhar com canvas, é importante distinguir entre conceitos como o elemento canvas e o contexto de um elemento, que frequentemente são confundidos. O elemento é o que está incorporado ao HTML (o nó do DOM). Um contexto canvas é um objeto com suas propriedades e métodos de renderização. O contexto pode ser 2D ou 3D. O elemento canvas pode ter apenas um contexto.

Você deve fornecer conteúdo alternativo dentro da tag <canvas> para que navegadores mais antigos que não suportam canvas, navegadores com JavaScript desativado e leitores de tela tenham algo significativo para renderizar (consulte Acessibilidade abaixo).

Você pode usar CSS para alterar o tamanho exibido do canvas, mas é melhor definir a resolução com os atributos width e height no <canvas> — seja no HTML ou via JavaScript — para evitar um bitmap borrado ou distorcido.

Por padrão, um elemento <canvas> tem um tamanho de 300x150 pixels.

Canvas vs. SVG: qual usar?

Tanto <canvas> quanto <svg> desenham gráficos no navegador, mas funcionam de maneiras fundamentalmente diferentes:

Canvas é baseado em pixels (modo imediato). Ao desenhar algo, o resultado vira um bitmap plano — o navegador não guarda memória das formas individuais. Não há DOM para o conteúdo desenhado, portanto não é possível anexar ouvintes de eventos a uma forma; para "mover" um círculo, é necessário limpar e redesenhar toda a cena a cada quadro.
SVG é baseado em formas (modo retido). Cada elemento permanece no DOM, pode ser estilizado com CSS, manipulado via script e é independente de resolução (permanece nítido em qualquer zoom).

Use canvas quando você redesenhar com frequência ou tiver muitos objetos: jogos, efeitos de partículas, visualização de dados em tempo real, processamento de imagens. Use SVG quando tiver um número moderado de formas que precisem ser interativas, acessíveis ou escaladas sem perda de qualidade: ícones, gráficos, diagramas. Como regra geral, canvas se destaca em muitos pixels mudando rapidamente, SVG em menos formas que permanecem interativas.

Dimensionamento: os atributos width/height versus CSS

Este é o problema mais comum com canvas. Um canvas tem dois tamanhos:

Os atributos width e height definem o tamanho do buffer de desenho (a resolução do bitmap em pixels).
width/height em CSS definem o tamanho exibido na página.

Se forem diferentes, o navegador estica o bitmap para caber na caixa CSS, o que borra ou distorce o desenho. Sempre defina os atributos com a resolução em que você desenha; use CSS apenas para posicionar o elemento se corresponder à mesma medida.

<!-- Good: drawing buffer matches what you draw -->
<canvas width="400" height="200"></canvas>

<!-- Risky: CSS stretches a default 300x150 bitmap to 600x300, blurring it -->
<canvas style="width: 600px; height: 300px;"></canvas>

Para saída nítida em telas de alta densidade de pixels ("Retina"), escale o buffer pelo window.devicePixelRatio (por exemplo, defina os atributos como cssWidth * devicePixelRatio) e depois chame ctx.scale(dpr, dpr) antes de desenhar.

Sintaxe

A tag <canvas> vem em pares. O conteúdo é escrito entre as tags de abertura (<canvas>) e fechamento (</canvas>).

Exemplo da tag HTML `<canvas>`:

O script abaixo obtém o elemento com document.getElementById() e chama getContext('2d') para obter o contexto de desenho 2D — o objeto que contém todos os métodos e propriedades de desenho. Definir fillStyle escolhe a cor de preenchimento e fillRect(x, y, width, height) pinta um retângulo preenchido cujo canto superior esquerdo está em (x, y). As coordenadas do canvas começam em (0, 0) no canto superior esquerdo, com x aumentando para a direita e y aumentando para baixo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
    <script>
      const c = document.getElementById('canvasExample');
      const ctx = c.getContext('2d');
      ctx.fillStyle = '#1c87c9';
      ctx.fillRect(10, 50, 80, 80);
    </script>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da tag HTML `<canvas>` usada para texto:

Para desenhar texto, defina a propriedade font (com a mesma sintaxe da propriedade abreviada font do CSS) e fillStyle para a cor; em seguida, chame fillText(text, x, y). O par (x, y) aqui é a posição da linha de base do texto, não o canto superior esquerdo. Observe que width e height são definidos como atributos no elemento para que o buffer de desenho corresponda à área em que desenhamos.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvasExample');
      const context = canvas.getContext('2d');
      context.font = '30pt Calibri';
      context.fillStyle = '#1c87c9';
      context.fillText('Canvas Example !', 50, 100);
    </script>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da tag HTML `<canvas>` usada para desenhar uma linha:

Linhas e outros caminhos são desenhados em três etapas. moveTo(x, y) levanta a "caneta" e a posiciona em um ponto de partida sem desenhar. lineTo(x, y) adiciona um segmento reto do ponto atual até o novo ponto — mas ainda nada é pintado. Somente stroke() efetivamente renderiza o caminho, usando o strokeStyle atual (a cor do contorno). Quando você desenha mais de um caminho separado, comece cada um com beginPath() primeiro; caso contrário, novos segmentos são adicionados ao caminho anterior. Use fill() (com fillStyle) em vez de stroke() quando quiser que um caminho seja preenchido em vez de contornado.

<!DOCTYPE html>
<html>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      const c = document.getElementById("canvasExample");
      const ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#1c87c9';
      ctx.stroke();
    </script>
  </body>
</html>

Experimente Você Mesmo »

Casos de uso comuns

Além de formas simples, o contexto 2D permite criar gráficos ricos:

Animação — limpe o canvas e redesenhe dentro de um loop requestAnimationFrame() para produzir movimentos suaves, quadro a quadro.
Imagens — ctx.drawImage(img, x, y) pinta um <img>, outro canvas ou um quadro de vídeo, o que serve de base para edição de fotos e filtros.
Gradientes — createLinearGradient() e createRadialGradient() produzem preenchimentos e traços com gradiente.
Jogos e visualização de dados — canvas é a escolha preferida quando é necessário repintar muitos objetos a cada quadro, razão pela qual bibliotecas de gráficos e jogos são construídas sobre ele.

Todos esses recursos dependem de JavaScript, portanto um bom domínio do HTML DOM ajuda a aproveitar ao máximo o canvas.

Acessibilidade

A saída do canvas é apenas pixels — leitores de tela e outras tecnologias assistivas não conseguem "ver" o que foi desenhado. Torne o conteúdo do canvas acessível:

Forneça conteúdo alternativo significativo entre as tags. Tudo dentro de <canvas>...</canvas> é exibido para navegadores sem suporte a canvas e exposto à tecnologia assistiva; portanto, descreva o desenho em vez de escrever uma mensagem genérica de "sem suporte".
Para um desenho estático, adicione role="img" e um aria-label (ou aria-labelledby) descrevendo-o, por exemplo: <canvas role="img" aria-label="Bar chart of 2024 sales">.
Para canvas interativos, espelhe os controles e o estado em elementos reais do DOM (botões, regiões dinâmicas), pois as formas desenhadas em si não são focalizáveis nem legíveis.

Atributos

Atributo	Valor	Descrição
`height`	pixels	Define a altura do elemento em pixels.
`width`	pixels	Define a largura do elemento em pixels.

A tag <canvas> suporta Atributos Globais e os Atributos de Evento.

Prática

Qual método retorna o objeto no qual você chama comandos de desenho como fillRect() e stroke()?

canvas.getContext('2d') retorna o contexto de renderização 2D.canvas.getDrawing() retorna a superfície de desenho.canvas.draw('2d') retorna o contexto de renderização.document.createContext(canvas) retorna o contexto.

Prática

Você desenha em um canvas de 300x150, mas define seu tamanho como 600px com CSS. O que acontece?

O navegador estica o bitmap de 300x150 para 600px, tornando o desenho borrado ou distorcido.O buffer de desenho cresce automaticamente para 600px e permanece nítido.O canvas ignora completamente o dimensionamento por CSS.O espaço extra fica transparente e o desenho mantém seu tamanho original.

Canvas vs. SVG: qual usar?

Dimensionamento: os atributos width/height versus CSS

Sintaxe

Exemplo da tag HTML <canvas>:

Resultado

Exemplo da tag HTML <canvas> usada para texto:

Exemplo da tag HTML <canvas> usada para desenhar uma linha:

Casos de uso comuns

Acessibilidade

Atributos

Prática

Exemplo da tag HTML `<canvas>`:

Exemplo da tag HTML `<canvas>` usada para texto:

Exemplo da tag HTML `<canvas>` usada para desenhar uma linha: