Canvas y el punto (0,0): de sorpresa a lógica

Canvas y el punto (0,0): de sorpresa a lógica

Cuando empecé a aprender Canvas en HTML5, lo primero que me sorprendió fue la ubicación del origen de coordenadas:

• En matemáticas, estamos acostumbrados a que (0,0) esté en el centro del plano cartesiano.
• Pero en Canvas, (0,0) está en la esquina superior izquierda del lienzo.

Al principio me pareció raro, hasta molesto. Pensaba: “¿por qué no poner el origen en el centro, como en el colegio?” 🤔

La lógica detrás de Canvas

Con el tiempo entendí que tiene mucho más sentido así:

• Si el (0,0) estuviera en el centro, habría que calcular constantemente coordenadas relativas para dibujar en pantalla.
• En cambio, al ponerlo en la esquina superior izquierda, basta avanzar hacia la derecha (X) y hacia abajo (Y).
• Esto es mucho más manejable para gráficos en computadoras, que dibujan línea por línea de arriba a abajo.

Lo que me pareció extraño al inicio, en retrospectiva era lo más práctico.

Ejemplo: dibujar una circunferencia

<canvas id="miCanvas" width="400" height="400"></canvas>
<script>
  const c = document.getElementById("miCanvas");
  const ctx = c.getContext("2d");
  
  // Circunferencia en (200,200) con radio 200
  ctx.beginPath();
  ctx.arc(200, 200, 200, 0, Math.PI * 2, true);
  ctx.stroke();
</script>

La función arc se usa así:

arc(x, y, radio, ánguloInicio, ánguloFinal, sentidoAntihorario);

En este caso:

• Centro en (200,200)
• Radio de 200
• Ángulos de 0 a 2π → círculo completo

Reflexión final

Ese pequeño detalle me enseñó que programar gráficos no siempre sigue la lógica matemática pura, sino la lógica práctica de las máquinas. Y hoy, viéndolo en retrospectiva, me parece incluso más intuitivo que si hubieran puesto el origen en el centro.