Ya sabes guardar datos, decidir, repetir y crear funciones. Ahora vas a ver el resultado en imagen: el elemento <canvas> es un lienzo de píxeles en el que JavaScript dibuja formas, colores y texto. Es la base del diseño generativo: carteles, patrones e identidades visuales que salen de reglas, no de trazos a mano.

<canvas id="lienzo" width="600" height="800">
  Cartel generativo: formas de colores sobre fondo oscuro.
</canvas>

const lienzo = document.querySelector("#lienzo");
const ctx = lienzo.getContext("2d");

• width y height son el tamaño real en píxeles del lienzo (no uses CSS para eso: se deformaría).
• getContext("2d") devuelve el contexto, el objeto con todas las herramientas de dibujo. Por costumbre se llama ctx.
• El texto dentro de <canvas> se muestra si el navegador no puede dibujar; añade además un aria-label o una descripción cerca del lienzo, porque lo dibujado no lo leen los lectores de pantalla.

El sistema de coordenadas empieza arriba a la izquierda: x crece hacia la derecha e y hacia abajo.

// Fondo
ctx.fillStyle = "#1d3557";
ctx.fillRect(0, 0, lienzo.width, lienzo.height);

// Rectángulo: x, y, ancho, alto
ctx.fillStyle = "#e63946";
ctx.fillRect(50, 50, 200, 120);

// Círculo: se dibuja como un trazado con un arco completo
ctx.fillStyle = "#f1faee";
ctx.beginPath();
ctx.arc(300, 400, 80, 0, Math.PI * 2);   // centro x, centro y, radio, ángulo inicial, final
ctx.fill();

// Línea
ctx.strokeStyle = "#a8dadc";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(50, 700);
ctx.lineTo(550, 700);
ctx.stroke();

// Texto
ctx.fillStyle = "#f1faee";
ctx.font = "bold 48px system-ui, sans-serif";
ctx.fillText("OTOÑO 2026", 50, 780);

• fillStyle y strokeStyle aceptan cualquier color CSS: nombres, #hex, rgb() o hsl().
• Los trazados (beginPath … fill o stroke) sirven para círculos, líneas y formas libres.

Aquí es donde la programación cambia el diseño. Con un bucle y Math.random() generas composiciones distintas cada vez:

function aleatorio(min, max) {
  return min + Math.random() * (max - min);
}

function circulo(x, y, radio, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, radio, 0, Math.PI * 2);
  ctx.fill();
}

const paleta = ["#e63946", "#f1faee", "#a8dadc", "#457b9d"];

for (let i = 0; i < 40; i++) {
  const color = paleta[i % paleta.length];   // alterna los colores en orden
  circulo(aleatorio(0, 600), aleatorio(0, 800), aleatorio(10, 60), color);
}

Y con dos bucles anidados, una retícula (el patrón base de muchos carteles suizos):

const celda = 100;
for (let fila = 0; fila < 8; fila++) {
  for (let col = 0; col < 6; col++) {
    const x = col * celda + celda / 2;
    const y = fila * celda + celda / 2;
    const radio = (fila + col) % 2 === 0 ? 40 : 15;   // alterna tamaños
    circulo(x, y, radio, "#f1faee");
  }
}

Cambia una sola regla (el número de columnas, la condición de la alternancia, la paleta) y el cartel entero cambia. Eso es diseñar el sistema, no solo la pieza.

💡 Consejo. ctx.globalAlpha = 0.6 hace transparentes las formas siguientes, y ctx.globalCompositeOperation = "multiply" las mezcla como en una capa de Photoshop. Prueba también el color en HSL: ` hsl(${i * 9} 70% 55%) ` crea degradados de tono con el contador del bucle.

Para exportar el resultado en PNG, en la mayoría de navegadores basta con clic derecho sobre el lienzo → Guardar imagen como…. Desde código se puede con lienzo.toDataURL("image/png").

• No ver nada: el script se ejecuta antes de que exista el <canvas> (usa defer) o el color de la forma es el mismo que el del fondo.
• Olvidar beginPath(): los trazados se acumulan y se rellenan juntos.
• Cambiar el tamaño del lienzo con CSS: la imagen se estira. Usa los atributos width y height.
• Confundir el eje y: en Canvas crece hacia abajo.
• Dibujar todo con valores fijos: guarda medidas y colores en variables y funciones.