Método closePath

O método closePath fecha automaticamente um caminho desenhado com o método lineTo, desenhando uma linha reta do ponto final para o ponto inicial. Se o caminho já estiver fechado ou for apenas um ponto, o método não fará nada.

Sintaxe

javascriptcontexto.closePath();

Exemplo

Primeiro, vamos desenhar duas linhas sem fechá-las usando 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();

Результат:

Exemplo

Agora vamos fechar essas duas linhas em um caminho usando closePath, obtendo assim um 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(); // fecha as linhas em um caminho
ctx.stroke();

Результат:

Exemplo

Vamos desenhar um quadrado, fechando o caminho com closePath em vez da última linha:

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(); // fecha as linhas em um caminho
ctx.stroke();

Результат:

Veja também