Coordenadas del Canvas
Información sobre las coordenadas del canvas de HTML, con ejemplos de código para dibujar un círculo y una línea usando el elemento canvas de HTML5.
El canvas de HTML es un elemento potente de HTML5 que permite crear y manipular gráficos en una página web usando JavaScript. El elemento <canvas> proporciona una superficie de dibujo bidimensional que puedes imaginar como una cuadrícula o sistema de coordenadas.
Esta página explica cómo funciona el sistema de coordenadas del canvas, cómo leer y escribir puntos en él, y cómo mover, escalar y rotar ese sistema con transformaciones. Si eres nuevo en el elemento, comienza primero con la introducción al Canvas.
El sistema de coordenadas
La cuadrícula del canvas comienza en la esquina superior izquierda, que tiene las coordenadas (0, 0). Desde ahí:
- El eje x aumenta hacia la derecha.
- El eje y aumenta hacia abajo (esto es lo contrario de las clases de matemáticas que la mayoría recuerda, donde y sube).
Cada punto del canvas es un par (x, y) medido en píxeles desde ese origen superior izquierdo.
(0,0)──────── x increases → ────────►
│ ┌───────────────────────────────┐
│ │ (0,0) (300,0) │
y │ │
│ │ (150,75) │
▼ │ │
│ (0,150) (300,150)│
└───────────────────────────────┘Para un canvas de 300 × 150, (0, 0) es la esquina superior izquierda, (300, 0) es la esquina superior derecha, (0, 150) es la esquina inferior izquierda, y (150, 75) es el centro exacto.
El contexto de renderizado 2D
Nunca se dibuja directamente sobre el elemento <canvas>. En su lugar, se le solicita un contexto de renderizado — un objeto que expone los métodos de dibujo (moveTo, lineTo, arc, fillRect, entre otros):
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");getContext("2d") devuelve el contexto 2D usado en todos los ejemplos siguientes. (Existen otros tipos de contexto, como "webgl" para 3D, pero "2d" es el que se usa para dibujar en canvas.) Cada coordenada que se pasa a un método del contexto se interpreta en la cuadrícula descrita anteriormente.
Dibujar una línea
Los métodos siguientes se usan para dibujar una línea recta en un canvas:
moveTo(x,y), que especifica el punto de inicio de la línealineTo(x,y), que especifica el punto final de la línea
Utiliza uno de los métodos de "trazado" para dibujar la línea, por ejemplo, stroke().
Ejemplo del elemento HTML <canvas> para dibujar una línea:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
const c = document.getElementById("canvasExample");
const ctx = c.getContext("2d");
// Starting point (0,0) is the top-left corner
ctx.moveTo(0, 0);
// Ending point (300,150) matches the canvas width and height
ctx.lineTo(300, 150);
ctx.strokeStyle = '#359900';
ctx.stroke();
</script>
</body>
</html>En el ejemplo anterior, la línea se dibuja en diagonal desde (0, 0) (esquina superior izquierda) hasta (300, 150) (esquina inferior derecha). Ten en cuenta que esta única línea no necesitó beginPath(): cuando todavía no se ha dibujado nada, moveTo/lineTo inician un trazado nuevo automáticamente. El círculo a continuación usa beginPath() porque es una figura independiente — consulta la explicación en esa sección.
Para más figuras y rellenos basados en el mismo sistema de coordenadas, consulta Dibujo en Canvas.
Dibujar un círculo
Los métodos siguientes se usan para dibujar un círculo en un canvas:
beginPath(), que inicia un nuevo trazado para que el círculo no quede conectado a lo dibujado anteriormente.arc(x, y, r, startAngle, endAngle), que añade un arco (una porción de círculo) al trazado actual.
Los parámetros de arc()
| Parámetro | Significado |
|---|---|
x, y | Las coordenadas del centro del círculo. |
r | El radio, en píxeles. |
startAngle | Donde comienza el arco, en radianes. |
endAngle | Donde termina el arco, en radianes. |
Los ángulos se miden en radianes, no en grados, y 0 apunta hacia la derecha (el eje x positivo), girando en sentido horario. Una vuelta completa equivale a 2 * Math.PI radianes (360°), por lo que un círculo completo va de 0 a 2 * Math.PI.
Para convertir grados a radianes, multiplica por Math.PI / 180:
const radians = degrees * (Math.PI / 180);Arcos parciales
No es necesario dibujar un círculo completo. Usa un ángulo final menor para dibujar solo una parte. Por ejemplo, un arco de 0 a Math.PI (media vuelta) dibuja la mitad inferior de un círculo, porque y aumenta hacia abajo:
// A half-circle (bottom half) centered at (100, 75) with radius 50
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI);
ctx.stroke();Ejemplo del elemento HTML <canvas> para dibujar un círculo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
The canvas tag is not supported by your browser.
</canvas>
<script>
const canvas = document.getElementById("exampleCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Center at (125, 95), radius 70. 125 is half of the 250 width.
ctx.arc(125, 95, 70, 0, 2 * Math.PI);
ctx.strokeStyle = '#1c87c9';
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>En el ejemplo anterior, el círculo está centrado en (125, 95) con un radio de 70.
beginPath() y closePath()
Estos dos métodos suelen generar confusión:
beginPath()descarta cualquier trazado que estuvieras construyendo e inicia uno completamente nuevo. Llámalo antes de cada figura independiente — de lo contrario, la nueva figura quedará unida a la anterior, y un únicostroke()/fill()les aplicará el mismo estilo a todas.closePath()traza una línea recta desde el punto actual de vuelta al inicio del trazado, "cerrando" el contorno. En un círculo completo el final ya coincide con el inicio, por lo queclosePath()no tiene efecto visible — se incluye como buena práctica y sí importa al construir figuras abiertas como un polígono.
El ejemplo de la línea anterior no necesitó ninguno de los dos métodos porque era un único trazado independiente. En cuanto dibujes una segunda figura, recurre a beginPath().
Transformaciones de coordenadas
En lugar de recalcular cada coordenada manualmente, puedes mover, redimensionar o rotar el sistema de coordenadas completo. Las transformaciones afectan a todo lo que dibujes después de aplicarlas.
Un patrón habitual es envolver el dibujo transformado entre save() y restore() para que la cuadrícula vuelva a su estado original:
ctx.save(); // remember the current coordinate system
// ...transform and draw...
ctx.restore(); // put the coordinate system backtranslate(x, y)
Mueve el origen (0, 0) a una nueva posición. Tras translate(50, 30), dibujar en (0, 0) aparecerá en realidad en (50, 30):
ctx.translate(50, 30);
ctx.fillRect(0, 0, 80, 40); // top-left corner now sits at (50, 30)scale(x, y)
Multiplica el tamaño de cada coordenada y dimensión. scale(2, 2) hace todo el doble de grande; scale(1, 0.5) mantiene el ancho pero reduce la altura a la mitad:
ctx.scale(2, 2);
ctx.fillRect(10, 10, 30, 30); // drawn at (20, 20), 60×60 in real pixelsrotate(angle)
Rota el sistema de coordenadas en sentido horario alrededor del origen actual. El ángulo está en radianes, igual que en arc(). Como la rotación ocurre alrededor de (0, 0), normalmente primero se usa translate() hacia el punto de pivote deseado:
ctx.translate(100, 75); // move origin to the pivot point
ctx.rotate(45 * Math.PI / 180); // rotate 45° clockwise
ctx.fillRect(-25, -25, 50, 50); // a square centered on the pivotLas transformaciones mantienen tus coordenadas en la misma cuadrícula que has estado usando — simplemente la reubican o la remodelan. Para dibujar texto posicionado en este sistema, consulta Texto en Canvas.