<canvas>: O Elemento CANVAS
Última atualização: 2026-10-13
<canvas>O Elemento CANVAS
Desenha gráficos, animações ou gráficos via JavaScript (2D ou WebGL); a tag é apenas uma tela em branco preenchida por script.
| Categoria | Scripts e Incorporação |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </canvas> tag |
| Status | Padrão |
📝 Sintaxe
<canvas width="300" height="150"></canvas>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
width | Canvas width in pixels, default 300. | |
height | Canvas height in pixels, default 150. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <canvas> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： canvas não desenha sozinho — use getContext em JS; combine com dimensionamento CSS para telas HiDPI.
❓ Perguntas Frequentes
QQual é a diferença entre canvas e SVG?
A
<canvas> é desenho em bitmap: o JS pinta pixel a pixel, quadro a quadro — ideal para jogos, grande volume de primitivos, filtros em tempo real; ao ampliar, fica embaçado. SVG é vetorial: nós de DOM descrevem formas, escala sem perdas — ideal para ícones e gráficos. Redesenho frequente em nível de pixel: canvas; gráficos vetoriais interativos: SVG.QPor que a largura e a altura do canvas não devem ser definidas só no CSS?
AO canvas tem duas dimensões: os atributos HTML
width/height são o número de pixels do buffer de desenho (padrão 300×150), e o tamanho CSS apenas estica a exibição. Mudar só o CSS deforma e embaralha o buffer — o correto é definir os atributos e o tamanho CSS em conjunto, ou escalar pelo devicePixelRatio.QO conteúdo do canvas é indexado por mecanismos de busca?
ANão — dentro do canvas há apenas pixels, sem texto nem DOM para rastrear. Informações textuais importantes precisam ficar fora do canvas (título, descrição, texto alternativo de acessibilidade); em aplicações complexas, ofereça um conteúdo de fallback em DOM dentro da tag como reserva.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
