Caminos en Canvas del HTML 5

El Canvas es uno de los elementos más novedosos del HTML 5, que ya comenzamos a explicar en el artículo de Introducción a Canvas. En anteriores artículos vimos ejemplos sobre diversos dibujos en un elemento canvas, como los rectángulos. Ahora vamos a continuar aprendiendo cómo dibujar estructuras diversas por medio de los caminos.

En canvas existen diversas funciones que nos pueden servir para dibujar siluetas a nuestro antojo, que se tienen que utilizar de manera complementaria. El proceso pasa por situarse en un punto del lienzo, luego definir cada uno de los puntos por los que pasa nuestro camino y luego pintar de color dentro, o simplemente dibujar la línea que pasaría por todos esos puntos. En este artículo veremos cómo rellenar de color todo el área que queda definida por un camino.

Veamos para empezar un resumen de algunas de las funciones disponibles para hacer caminos, las que que utilizaremos durante el presente artículo.

Función beginPath()

Esta función sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino. No tiene ningún parámetro y por si sola no hace ninguna acción visible en el canvas. Una vez invocada la función podremos empezar a dibujar el camino añadiendo segmentos para completarlo con las diferentes funciones de caminos.

Según las pruebas realizadas, podríamos iniciar un camino sin utilizar antes beginPath(), puesto que el efecto a primera vista es el mismo que si no lo invocamos (entiendo que el navegador lo invoca por nosotros al empezar a utilizar funciones de caminos en canvas). No obstante, debe ser recomendable hacer las cosas correctamente e invocarlo antes de comenzar un camino.

Función moveTo()

Sirve para mover el puntero imaginario donde comenzaremos a hacer el camino. Esta función no dibuja nada en si, pero nos permite definir el primer punto de un camino. Llamar esta función es como si levantásemos el lápiz del lienzo y lo trasladásemos, sin pintar, a otra posición.

Recibe como parámetro los puntos x e y donde ha de moverse el puntero para dibujo. Para saber cuál es el punto donde deseamos movernos (x,y), Recordar que el eje de coordenadas del canvas es la esquina superior izquierda.

Función lineTo()

Esta función provoca que se dibuje una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y) que se indique como parámetro. El método lineTo(), por tanto es como si posáramos el lápiz sobre el lienzo en la posición actual y arrastrásemos, dibujando una línea recta, hasta el punto donde se definió al invocar el método.

La posición actual del camino la podemos haber indicado previamente con un moveTo(), o donde hayamos terminado una línea dibujada anteriormente. Si no se indicó antes una posición de nuestro puntero de dibujo, lineTo() no dibuja ninguna línea, sino que se tendrá en cuenta las coordenadas enviadas como parámetro para posicionar tan solo el puntero de dibujo allí. Dicho de otra manera, si no se dijo dónde empezar el dibujo, o no se ha dibujado ningún otro segmento en el camino anteriormente, lineTo() será equivalente a moveTo().

Función fill()

Este método del contexto del canvas sirve para rellenar de color el área circunscrita por un camino. Para rellenar de color un camino, el camino tendría que estar cerrado, por lo que, si no lo está, automáticamente se cerrará con una línea recta hasta el primer punto del camino, es decir, donde comenzamos a dibujar. Sin embargo, si durante los distintos segmentos del camino nos dejamos algún segmento abierto, no se pintará nada.

Como decimos, si no llegamos a cerrar el camino, el método fill() lo cerrará por nosotros, pero podríamos utilizar explícitamente el método closePath() para hacerlo nosotros (closePath() lo explicaremos en futuros artículos).

Ejemplo de camino sencillo

Con las funciones vistas hasta el momento ya podemos hacer unas primeras pruebas de caminos en canvas. Ahora vamos ver como podríamos realizar un rombo en el canvas, relleno de color.

ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(75,65);
ctx.lineTo(50,125);
ctx.lineTo(25,65);
ctx.fill();

Como se puede ver, iniciamos un camino con beginPath(). Luego hacemos un moveTo() para indicar el punto donde comenzar el camino. Posteriormente dibujamos varias líneas a diversos puntos del canvas, para acabar invocando al método fill(), con lo que rellenaremos de color el camino.

Fijarse que el camino no se había llegado a cerrar. Por lo que fill() lo cerrará por nosotros con una línea al primer punto donde comenzamos el dibujo.

Código completo del ejemplo de camino

A continuación podemos encontrar el código completo de este ejemplo de construcción de un camino con el elemento Canvas del HTML 5.

<html>
<head>
   <title>Canvas Caminos</title>
<script>
//La ya conocida función para cargar el contexto de un canvas
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}

window.onload = function(){
   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(50,5);
      ctx.lineTo(75,65);
      ctx.lineTo(50,125);
      ctx.lineTo(25,65);
      ctx.fill();
   }
}
</script>
</head>

<body>
<canvas id="micanvas" width="150" height="150">
Accede a este script con un navegador que acepte canvas del HTML 5
</canvas>
</body>
</html>

Para acabar, podemos ver el ejemplo en marcha en una página aparte.