Un Path es un conjunto de movimientos o dibujos que realicemos dentro de un Canvas de HTML5. De esta manera, mediante código podemos trazar los dibujos y al final del Path decidir cómo los vamos a pintar o volcar sobre el Canvas. Este es el punto importante, lo especificado dentro de un Path solo se vuelca cuando demos por terminado el Path.
Siempre que estemos trabajando con un Canvas lo primero que haremos será crear el elemento Canvas de HTML5 y posteriormente obtener su referencia y contexto mediante Javascript.
Para crear un Path lo primero que tendremos que hacer es utilizar el método .beginPath() el cual indica el principio del Path.
ctx.beginPath();
Una vez creado el Path podremos hacer movimientos sobre el Canvas con .moveTo(), podremos dibujar líneas con .lineTo(), arcos mediante .arc(),… Por ejemplo podríamos tener el siguiente código:
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.arc(150,100,100,(Math.PI/180)*180,0,true);
Lo siguiente será definir el color con el cual hemos realizado los movimientos sobre el Canvas. Para esto tenemos la propiedad .strokeStyle. Y lo último el ejecutar el dibujado del contenido sobre el Canvas. Esto lo conseguimos mediante el método .stroke().
ctx.strokeStyle = "#f00";
ctx.stroke();
Con estos tres sencillos pasos: inicio del Path, .beginPath(), realización de movimientos y volcado de contenido, .stroke() tenemos creado un Path sobre el Canvas en HTML5.
