Uso del elemento <canvas>

El elemento <canvas> en HTML permite renderizar gráficos usando JavaScript directamente en el navegador. Es adecuado para juegos, animaciones, visualizaciones y otros contenidos dinámicos.

Configuración básica

Crear un <canvas> es sencillo. Defines un ancho y una altura, y opcionalmente un estilo como un borde.

Obtener el contexto de dibujo

Para dibujar en un canvas, primero debes obtener su contexto de dibujo. El más común es el contexto '2d', que se obtiene usando el método getContext('2d').

Dibujar un rectángulo

Usa el método fillRect(x, y, width, height) para dibujar un rectángulo. La propiedad fillStyle define su color.

Dibujar una línea

Para dibujar líneas, usa los métodos beginPath(), moveTo(), lineTo() y stroke(). Estos crean líneas rectas entre puntos.

Dibujar un círculo

Para dibujar círculos, usa el método arc(). Sus parámetros incluyen las coordenadas del centro, radio y ángulos inicial/final en radianes.

Renderizar texto

Usa fillText() para renderizar texto en el canvas. Las propiedades font y fillStyle definen su apariencia.

Animación simple

Para crear animaciones, usa requestAnimationFrame(). Limpia el cuadro anterior con clearRect() y luego vuelve a dibujar. Esto te permite crear objetos en movimiento.