¿Qué es un elemento canvas en HTML5?

El elemento <canvas> en HTML5 es un contenedor para dibujar gráficos mediante scripts (generalmente JavaScript). Permite crear visualizaciones dinámicas, juegos y animaciones directamente en el navegador sin usar plugins.

Aspectos clave:

• Dibujo con píxeles: Funciona a nivel de píxeles, proporcionando control total sobre cada elemento de la imagen.
• Uso de API: La interacción con <canvas> se realiza a través de la API del contexto de renderizado, siendo el más común el 2d para gráficos bidimensionales. También existe webgl para 3D.
• Lienzo vacío: El elemento <canvas> en sí es solo un contenedor. Todo el dibujo se realiza mediante programación.

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

// Obtenemos el elemento canvas
const canvas = document.getElementById('myCanvas');

// Obtenemos el contexto 2D de dibujo
const ctx = canvas.getContext('2d');

// Dibujamos un rectángulo
ctx.fillStyle = "#FF0000"; // Color de relleno
ctx.fillRect(0, 0, 150, 75); // x, y, ancho, alto

Las capacidades incluyen el dibujo de:

• Formas primitivas (líneas, rectángulos, círculos, arcos)
• Texto
• Imágenes
• Gradientes y patrones
• Caminos (path) para figuras complejas