HTML Canvas
Antes, SVG colocou ícones nítidos como marcação vetorial ou ficheiro .svg. Esta lição apresenta canvas: uma caixa bitmap vazia que o JavaScript pinta. HTML só coloca e dimensiona; os scripts desenham píxeis. Âmbito prático — elemento + desenho 2D mínimo — não um curso completo de Canvas API, jogos ou WebGL.
Por que canvas num curso HTML
Principiantes veem canvas em gráficos e minijogos. A divisão ajuda: HTML possui o elemento; JS os píxeis. Após SVG, canvas mostra a outra ferramenta comum. Aqui bastam getContext("2d") e fillRect.
Resposta direta
1) Adicione canvas com id, width, height e texto de recurso. 2) Em JS getContext("2d"). 3) Desenhe com fillStyle + fillRect. 4) Atributos definem a resolução do bitmap. 5) SVG para ícones; canvas para píxeis dinâmicos. 6) Só intro.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Elemento canvas minúsculo
Sem script, canvas é um retângulo vazio. HTML declara tamanho e id para o script o encontrar.
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
Ler a casca
- canvas cria a superfície
- width/height definem o bitmap
- id permite a seleção
- texto entre tags é recurso
- só CSS pode esticar e desfocar
- ao contrário de SVG, sem formas filhas no HTML
Desenhar um retângulo com contexto 2D
Um script curto pinta. getContext("2d") devolve a API 2D; fillRect preenche um retângulo.
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
Ler as chamadas de desenho
- getElementById encontra canvas
- getContext("2d") abre a API
- fillStyle define a cor
- fillRect preenche um retângulo
- sem script só o recurso
- a seguir: web storage
Escolher canvas vs SVG
- Logo estático nítido: SVG
- Píxeis que mudam muito: canvas
- Formas como DOM: muitas vezes SVG
- Pensar região de píxeis: canvas
- Distintivo simples: costuma SVG
- WebGL/jogos: fora desta intro
Prática — canvas na página
- Cole a casca.
- Adicione o script; confirme o retângulo.
- Mude cor/números.
- Remova o script um momento.
- Estique só com CSS — possível desfoque.
- Frase: canvas é bitmap JS; SVG marcação vetorial.
- Antevisão: web storage.
Erros fáceis
- Esperar formas só do HTML
- Esquecer texto de recurso
- Usar canvas para logos melhores em SVG
- Confundir canvas com SVG
- Mudar só o tamanho CSS
- Tratar a intro como curso completo de Canvas
- Deixar canvas sem nome se tem significado
Resumo
- canvas é uma superfície bitmap vazia
- JavaScript desenha com getContext("2d") e fillRect
- SVG para ícones; canvas para píxeis dinâmicos
- O texto de recurso ajuda sem desenho
- SVG era vetor; aqui píxeis por script
- Seguinte: web storage em HTML
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo