Aprende a usar el elemento canvas y su contexto 2D para limpiar, dibujar y repintar formas desde datos controlados por JavaScript.
Canvas sirve cuando necesitas dibujar píxeles o gráficos controlados por JavaScript: visualizaciones, juegos simples, editores, trazos, partículas o fondos generativos.
A diferencia del DOM, no creas un nodo por cada forma. Trabajas sobre un lienzo y lo repintas cuando cambia el estado.
En esta lección vas a usar <code>getContext('2d')</code>, limpiar con <code>clearRect</code> y dibujar formas desde arrays de datos.
Antes de llegar aquí conviene dominar [render dinámico](/curso/javascript/leccion/javascript-render-dinamico-medio), porque la idea de estado -> dibujo es la misma.
En DOM modificas nodos; en canvas pintas sobre una superficie.
Si necesitas que cada elemento sea seleccionable, semántico o accesible por separado, DOM suele ser mejor. Si necesitas muchas formas, animación o dibujo libre, canvas encaja mejor.
El canvas no recuerda objetos como 'círculo' o 'cuadrado'. Si quieres cambiar algo, guardas los datos en JavaScript, limpias el lienzo y vuelves a dibujar.
Todo empieza con una referencia al canvas y su contexto 2D.
<code>getContext('2d')</code> devuelve el objeto que contiene los métodos de dibujo: líneas, rectángulos, texto, arcos, relleno y limpieza.
Antes de dibujar una forma compleja, usa <code>beginPath()</code> para iniciar un trazo limpio y evitar mezclar caminos anteriores.
El patrón estable es limpiar, recorrer datos y dibujar.
Cuando cambian color, tamaño o posiciones, no intentes borrar una forma concreta a mano. Limpia el canvas completo con <code>clearRect</code> y dibuja el estado actual.
Este patrón evita residuos visuales y hace que cada render sea predecible.
Aprende a usar el elemento canvas y su contexto 2D para limpiar, dibujar y repintar formas desde datos controlados por JavaScript.
Código del tema: canvas · getContext · draw
En DOM modificas nodos; en canvas pintas sobre una superficie.
Si necesitas que cada elemento sea seleccionable, semántico o accesible por separado, DOM suele ser mejor. Si necesitas muchas formas, animación o dibujo libre, canvas encaja mejor.
El canvas no recuerda objetos como 'círculo' o 'cuadrado'. Si quieres cambiar algo, guardas los datos en JavaScript, limpias el lienzo y vuelves a dibujar.
Todo empieza con una referencia al canvas y su contexto 2D.
getContext('2d') devuelve el objeto que contiene los métodos de dibujo: líneas, rectángulos, texto, arcos, relleno y limpieza.
Antes de dibujar una forma compleja, usa beginPath() para iniciar un trazo limpio y evitar mezclar caminos anteriores.
const canvas = document.getElementById('lienzo');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#22d3ee';
ctx.beginPath();
ctx.arc(120, 80, 34, 0, Math.PI * 2);
ctx.fill();El patrón estable es limpiar, recorrer datos y dibujar.
Cuando cambian color, tamaño o posiciones, no intentes borrar una forma concreta a mano. Limpia el canvas completo con clearRect y dibuja el estado actual.
Este patrón evita residuos visuales y hace que cada render sea predecible.
function dibujar(puntos) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
puntos.forEach((punto) => {
ctx.beginPath();
ctx.arc(punto.x, punto.y, punto.r, 0, Math.PI * 2);
ctx.fill();
});
}