uso do beginPath();

Oi Geovane,

O beginPath serve para iniciar ou reiniciar o caminho do desenho.

Se você não tiver nada antes do seu desenho, o desenho fica igual com ou sem o beginPath().

Caso você tenha, verá que ele reinicia o caminho para o novo desenho.

Abraço!

"Serve para iniciar ou reiniciar o caminho" isso significa onde vai ser a origem do meu desenho? Se sim, por que a função não foi usada para desenhar o retângulo?

Geovane para melhor entendimento do beginPath(), você já experimentou retirar ele do código, utilize o código abaixo e retire a função onde ele desenha o circulo e verá a diferença.

<canvas id="tela" width="600" height="400"></canvas>

<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle="green";
c.fillRect(0,0,200,400);

c.fillStyle="red";
c.fillRect(400,0,200,400);

c.fillStyle="gray";
c.beginPath();
c.moveTo(300,200);
c.lineTo(200,400);
c.lineTo(400,400);
c.fill();

// retire aqui a função beginPath e vera a diferença!!!!!
c.fillStyle="blue";
c.beginPath(); // <-------
c.arc(300,100,50,0,2*3.14);
c.fill();


</script>

Ok, Gustavo. Existe de fato uma diferença. Mas o curioso é que no trecho

// retire aqui a função beginPath e vera a diferença!!!!!
c.fillStyle="blue";
c.beginPath(); // <-------
c.arc(300,100,50,0,2*3.14);
c.fill();

eu estou gerando o circulo, porém na página de resultados a interferência ocorre triângulo. Por quê?

Geovane exatamente. Como pode ver no trecho de código abaixo estou iniciando o triangulo com o beginPath();

c.fillStyle="gray";
c.beginPath();
c.moveTo(300,200);
c.lineTo(200,400);
c.lineTo(400,400);
c.fill();

Se no trecho de código abaixo eu remover o beginPath() é como se o triangulo e o circulo fossem um único desenho, devido a isto eu preciso informar com o beginPath() que estou iniciando um novo desenho.

// retire aqui o metodo beginPath e vera a diferença!!!!!
c.fillStyle="blue";
c.beginPath(); // <-------
c.arc(300,100,50,0,2*3.14);
c.fill();

Espero ter ajudado!

Obrigado.