Método closePath

El método closePath cierra automáticamente una figura dibujada con el método lineTo, trazando una línea recta desde el punto final hasta el punto inicial. Si la figura ya estaba cerrada o es simplemente un punto, el método no hace nada.

Sintaxis

javascriptcontexto.closePath();

Ejemplo

Para empezar, dibujemos dos líneas, sin cerrarlas mediante closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Ejemplo

Y ahora cerremos estas dos líneas en una figura mediante closePath, obteniendo así un triángulo:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // cerramos las líneas en una figura
ctx.stroke();

Результат:

Ejemplo

Dibujemos un cuadradito, en lugar de la última línea cerrando la figura mediante closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // cerramos las líneas en una figura
ctx.stroke();

Результат:

Véase también