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
0a2π→ 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.
