Trazados en HTML5 Canvas

por

En este artículo vamos a explicar cómo dibujar trazados en HTML5 Canvas y la API JavaScript que nos proporciona el navegador para renderizar gráficos. HTML5 Canvas proporciona una poderosa API JavaScript para dibujar gráficos en una ventana gráfica (llamada lienzo) del navegador. Si aún no sabes lo que es el Canvas puedes profundizar más en el artículo etiqueta o tag canvas de html5.

Si queremos dibujar con lapiz y papel lo primero que haremos será crear líneas o trazados que poco a poco irán formando nuestro dibujo. Del mismo modo una de las características fundamentales del Canvas es la capacidad de crear trazados, que son básicamente las rutas que van a seguir las líneas que se van a trazar o dibujar en el lienzo. En este artículo, explicaremos las instrucciones clave para trabajar con trazados, empezando por beginPath y closePath.

beginPath() y closePath() en HTML5 Canvas

La instrucción beginPath() en Canvas marca el inicio de un nuevo trazado, imagina esto como levantar un lápiz para comenzar a dibujar en un lienzo. Es crucial llamar a beginPath() antes de definir cualquier trazado nuevo con:

ctx.beginPath();

Esta simple línea de código establece el contexto de dibujo para un nuevo trazado, asegurándose de que cualquier trazado anterior no se mezcle con el próximo. Puedes pensar en beginPath() como un paso preparatorio antes de crear todas las rutas del trazado.

La instrucción closePath() en Canvas tiene la función de conectar el último punto del trazado con el primer punto, creando así una forma cerrada y cerrando el trazado.

ctx.closePath();

Este cierre es importante cuando se desea rellenar el área del trazado de un color o para asegurarse que la forma se vea completa. Sin embargo, también podemos añadir los puntos de cierre nosotros. Lo importante es que los trazados no estén abiertos si queremos añadir algunos efectos como relleno de color, de lo contrario pueden producirse efectos inesperados.

Trazados en HTML5 Canvas

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(150, 250);
    ctx.lineTo(250, 50);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = "red";
    ctx.fill();

En este ejemplo, beginPath() inicia un nuevo trazado, moveTo() y lineTo() definen el trazado, y closePath() cierra la forma. Finalmente, stroke() dibuja el trazado en el lienzo. Sin closePath(), el trazado no sería una forma cerrada. Aunque, como ya mencioné antes, si sustituimos closePath() por ctx.lineTo(50, 50); obtenemos el mismo resultado.

Una vez tenemos el trazado cerrado establecemos el color de relleno en rojo ctx.fillStyle = "red"; y procedemos a rellenarlo con ctx.fill(); Este es el resultado final.

Trazados en HTML5 Canvas

beginPath() y closePath() junto con las instrucciones de trazados son las herramientas básicas para un desarrollador Canvas. Combinar todas estas funciones de dibujo permite crear formas complejas y efectos visuales asombrosos. Entender su funcionamiento es esencial para dar vida a tus ideas visuales en la web y aprovechar la potencia del HTML5 Canvas. Veamos algunas instrucciones de trazados que nos ofrece Canvas.

Instrucciones de Trazados

  • fillStyle = color; Establece el color de relleno para el trazado, acepta los mismos colores que CSS.
ctx.fillStyle = "red";
  • lineWidth = width; Establece el ancho de la línea en píxeles para el trazado. Si establecemos 10 píxeles implica que sobresalen 5 píxeles por cada lado del trazado.
ctx.lineWidth = 4
  • beginPath(); Esta instrucción marca el comienzo de un nuevo trazado. Es importante llamar a beginPath() antes de comenzar a definir un nuevo trazado.
   ctx.beginPath();
  • moveTo(x, y); Mueve el «lápiz» (posición actual) a las coordenadas (x, y) sin trazar una línea. Es útil para moverse a la posición inicial de un trazado.
   ctx.moveTo(x, y);
  • lineTo(x, y); Agrega una línea desde la posición actual hasta las coordenadas (x, y).
   ctx.lineTo(x, y);
  • rect(x, y, width, height); Esta instrucción dibuja un rectángulo en el lienzo desde la posición (x, y) y con el ancho y alto especificado en (width, height).
ctx.rect(x, y, width, height);
  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); Esta instrucción dibuja una elipse con centro en (x, y), radios (radiusX, radiusY), rotada según (rotation), ángulo inicial y final en radianes (startAngle, endAngle) y en sentido horario (por defecto). Esta instrucción es muy completa y proporciona muchas opciones de dibujo. 
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
  • arc(x, y, radio, inicio, fin, sentidoAntihorario); Dibuja un arco circular con centro en (x, y), con ángulo en radianes desde inicio hasta fin y en sentido horario (por defecto).
   ctx.arc(x, y, radio, inicio, fin, sentidoAntihorario);
  • closePath(); Cierra el trazado actual conectando el punto final con el punto inicial. Esto crea una forma cerrada.
   ctx.closePath();
  • stroke(); Esta instrucción es la que dibuja todo el trazado previamente definido, utilizando el color de trazo actual.
   ctx.stroke();
  • fill(); Esta instrucción rellena el área cerrada del trazado con el color de relleno actual.
   ctx.fill();

Dibujar trazados en HTML5 Canvas

El dominio en la combinación de todas las instrucciones de trazados es esencial para trabajar con múltiples trazados en un mismo lienzo. Utilizar beginPath(); junto con éstas instrucciones permite definir trazados separados sin que se superpongan entre sí. Veamos un ejemplo:

// Estilos trazo y relleno
ctx.lineWidth = 4;
ctx.fillStyle = "orange";

// Casa
ctx.beginPath();
ctx.rect(180, 300, 180, 240);
ctx.moveTo(180, 300);
ctx.lineTo(270, 200);
ctx.lineTo(360, 300);
ctx.closePath();
ctx.fill();
ctx.stroke();

// Puertas y ventanas
ctx.beginPath();
ctx.rect(210, 540, 50, -80);
ctx.rect(210, 340, 40, 40);
ctx.rect(290, 340, 40, 40);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();

// Buardilla
ctx.beginPath();
ctx.arc(270, 260, 20, 0, Math.PI*2);
ctx.fill();
ctx.stroke();

// Tronco árbol
ctx.beginPath();
ctx.rect(480, 500, 50, -140);
ctx.fillStyle = "brown";
ctx.fill();
ctx.stroke();

// Copa árbol
ctx.beginPath();
ctx.ellipse(505, 360, 80, 30, 0, 0, Math.PI*2);
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();

Este código nos mostrará una sencilla imagen como la siguiente:

Dibujar trazados en HTML5 Canvas

En este ejemplo, beginPath(); se llama antes de definir cada trazado y closePath(); se puede llamar para cerrar alguno de los trazado cuando es necesario. Esto garantiza que los trazados estén separados y no se conecten entre sí, de modo que el color de relleno se aplique al trazado especificado.

Consejos sobre trazados

  • beginPath() Es crucial al trabajar con trazados en HTML5 Canvas, permiten la creación de formas distintas y asegura que los trazados no se mezclen.
  • closePath() Es útil para cerrar trazados desde el punto actual hacia el punto inicial.
  • El orden de dibujo es importante, los trazados se superponen unos a otros y dependiendo del orden stroke() y fill() también se dibujará el uno sobre el otro. Esto provoca efectos visuales distintos, sobretodo en trazados con lineas gruesas.

Estos son sólo algunos consejos y formas básicas sobre trazados que se pueden obtener con la API JavaScript del HTML5 Canvas. Experimentar con diferentes instrucciones de dibujo nos permitirá crear gráficos más complejos y vistosos en el lienzo.

En los próximos artículos hablaremos en mayor profundidad sobre cada tipo de trazado en particular.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario