Las posibilidades que esto nos da son impresionantes, debido a que con los algoritmos necesarios podremos realizar composiciones sin límite, dibujar cualquier tipo de figura en HTML5 y con ello hasta lograr en conjunción con otros elementos resultados nunca imaginados en especificaciones anteriores del lenguaje.
Utilizando Path
Como mencionamos el path es lo que nos permitirá indicar al canvas las coordenadas por las cuales debe hacer el dibujo, con dichas coordenadas el canvas podrá saber dónde trazar las líneas correspondientes y al final con la acumulación correcta de líneas podremos lograr cualquier tipo de figura.
Antes de pasar a los ejemplos correspondientes debemos saber que métodos están disponibles para el elemento canvas y el path, veamos a continuación la siguiente lista:
- beginPath(): Este método nos permite iniciar un nuevo path.
- closePath(): Este método intenta cerrar el path actual dibujando una línea desde el final de la última línea hasta las coordenadas iniciales.
- fill(): Rellena las formas descritas por los sub-path.
- isPointInPath(x, y): Retorna true si el punto especificado está contenido dentro de la forma dibujada por el path actual.
- lineTo(x, y): Dibuja un sub-path en las coordenadas especificadas.
- moveTo(x, y): Nos permite movernos a las coordenadas especificadas sin necesidad de dibujar un sub-path.
- rect(x, y, w, h): Dibuja un rectángulo cuyas coordenadas en la esquina superior izquierda corresponden a (x, y) su ancho corresponde a w y su altura corresponde a h.
- stroke(): Dibuja las líneas exteriores de las formas dibujadas por el sub-path.
• Llamamos al método beginPath.
• Nos movemos a la posición inicial utilizando el método moveTo.
• Dibujamos los sub-paths con los métodos lineTo, etc.
• Opcionalmente podemos llamar al método closePath.
• Por último llamamos a los métodos fill o stoke.
Ya tenemos el orden recomendado para iniciar a dibujar ahora vemos el código correspondiente en HTML5.
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> canvas {border: thin solid black} body > * {float:left;} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Su navegador no es compatible con el elemento <code>canvas</code> </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillStyle = "yellow"; ctx.strokeStyle = "black"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(110, 10); ctx.lineTo(110, 120); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(150, 10); ctx.lineTo(200, 10); ctx.lineTo(200, 120); ctx.lineTo(190, 120); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(250, 10); ctx.lineTo(250, 120); ctx.stroke(); </script> </body> </html>
Como podemos ver se hace dos llamados a beginPath(), con ello logramos iniciar las áreas de dibujo en el canvas luego con moveTo() establecemos las posiciones iniciales y de resto es dibujar.
Veamos cómo nos queda nuestro dibujo en el navegador:
Con esto finalizamos el tutorial, no solo conociendo los distintos métodos y herramientas adicionales que podemos utilizar sino destacando que ya no son formas solamente rectangulares las cuales podemos dibujar.