Dibuja con código

Todo dibujo necesita una superficie. En la web se llama canvas, y es literalmente un rectángulo en blanco donde tú mandas.

Abajo hay código de verdad, funcionando. Cámbialo. Prueba poner otro color en la línea del fillStyle — sirven nombres como "tomato", "gold" o "hotpink".

<canvas id="c" width="400" height="240"></canvas>

<script>
  const lienzo = document.getElementById("c");
  const pincel = lienzo.getContext("2d");

  // Un rectángulo: x, y, ancho, alto
  pincel.fillStyle = "#34a2fd";
  pincel.fillRect(40, 40, 120, 80);
</script>

Los círculos necesitan una línea más, porque hay que decirle al pincel dónde empieza y dónde termina. La palabra arc significa arco: un círculo completo es un arco que da la vuelta entera.

Fíjate en el bucle for: esa es la parte poderosa. En vez de escribir cinco círculos, escribes uno y le dices "hazlo cinco veces".

<canvas id="c" width="400" height="240"></canvas>

<script>
  const pincel = document.getElementById("c").getContext("2d");
  const colores = ["#34a2fd", "#8cfdfd", "#00e676", "#ffd23f", "#ff6a52"];

  // Repite 5 veces. i vale 0, luego 1, luego 2...
  for (let i = 0; i < 5; i++) {
    pincel.beginPath();
    pincel.arc(70 + i * 65, 120, 28, 0, Math.PI * 2);
    pincel.fillStyle = colores[i];
    pincel.fill();
  }
</script>

Acá está lo que separa un dibujo de un programa: reaccionar. La línea addEventListener significa "cuando pase esto, haz esto otro".

Pasa el dedo o el mouse por encima del recuadro negro.

<canvas id="c" width="400" height="300"></canvas>

<script>
  const lienzo = document.getElementById("c");
  const pincel = lienzo.getContext("2d");
  let tono = 0;

  function pintar(x, y) {
    const caja = lienzo.getBoundingClientRect();
    tono = (tono + 4) % 360;
    pincel.beginPath();
    pincel.arc(x - caja.left, y - caja.top, 14, 0, Math.PI * 2);
    pincel.fillStyle = "hsl(" + tono + ", 90%, 62%)";
    pincel.fill();
  }

  // Cuando muevas el mouse, pinta
  lienzo.addEventListener("mousemove", e => pintar(e.clientX, e.clientY));

  // Lo mismo con el dedo, en el celular
  lienzo.addEventListener("touchmove", e => {
    e.preventDefault();
    pintar(e.touches[0].clientX, e.touches[0].clientY);
  });
</script>

Sin darte cuenta usaste cuatro cosas que están en todos los programas del mundo: variables (guardar un valor), funciones (un bloque con nombre que hace algo), bucles (repetir) y eventos (reaccionar).

Eso es la base. Nuestros juegos usan exactamente lo mismo, solo que con más líneas.

Draw with code