Boa noite, Denilson S. Duque
Sim, está correto! O método fill() fecha automaticamente a forma, sem precisar voltar ao ponto inicial. Já com stroke(), seria necessário adicionar a linha para fechar o desenho. Ótima percepção!
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="minhaTela" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script>
var tela = document.getElementById("minhaTela");
var pincel = tela.getContext("2d");
// Desenhando um triângulo preenchido
pincel.fillStyle = "black";
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(50, 400);
pincel.lineTo(400, 400);
pincel.closePath(); // Opcional, mas ajuda a fechar o caminho
pincel.fill(); // Preenche o triângulo com a cor preta
// Desenhando um triângulo com contorno
pincel.strokeStyle = "red";
pincel.beginPath();
pincel.moveTo(100, 100);
pincel.lineTo(100, 350);
pincel.lineTo(350, 350);
pincel.closePath(); // Fecha o caminho do triângulo
pincel.stroke(); // Desenha o contorno do triângulo com a cor vermelha
</script>
</body>
</html>
→ O primeiro triângulo é desenhado usando o método fill(), que preenche o interior do triângulo com a cor preta e fecha automaticamente a forma.
→ O segundo triângulo é desenhado usando o método stroke(), que desenha o contorno do triângulo com a cor vermelha. Aqui, usamos closePath() para fechar o caminho do triângulo antes de chamar stroke().
Espero tê-lo ajudado, bons estudos!
