O que é um elemento canvas em HTML5?

O elemento <canvas> em HTML5 é um contêiner para desenhar gráficos usando scripts (geralmente JavaScript). Permite criar visualizações dinâmicas, jogos e animações diretamente no navegador sem usar plugins.

Aspectos-chave:

• Desenho por pixels: Funciona ao nível de pixels, oferecendo controlo total sobre cada elemento da imagem.
• Uso de API: A interação com <canvas> ocorre através da API do contexto de renderização, sendo o mais comum o 2d para gráficos bidimensionais. Existe também webgl para 3D.
• Tela vazia: O elemento <canvas> em si é apenas um contêiner. Todo o desenho é feito por programação.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Obter o elemento canvas
const canvas = document.getElementById('myCanvas');

// Obter o contexto 2D de desenho
const ctx = canvas.getContext('2d');

// Desenhar um retângulo
ctx.fillStyle = "#FF0000"; // Cor de preenchimento
ctx.fillRect(0, 0, 150, 75); // x, y, largura, altura

As capacidades incluem desenhar:

• Formas primitivas (linhas, retângulos, círculos, arcos)
• Texto
• Imagens
• Gradientes e padrões
• Caminhos (path) para figuras complexas