Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Necessidade do pincel.beginPath(); ?

Mesmo sem o pincel.beginPath(); ( No triângulo) o código funciona.

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

<script>


    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(200, 0, 400, 400);

    pincel.fillStyle = 'green'
    pincel.fillRect(0, 0, 200, 400);

    pincel.fillStyle = 'red'    
    pincel.fillRect(400, 0, 600, 400);

    pincel.fillStyle = 'yellow'
    //pincel.beginPath();
    pincel.moveTo(300, 200);
    pincel.lineTo(200, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle ='blue';
    pincel.beginPath();
    pincel.arc(300, 200, 50, 0, 2 * 3.14);
    pincel.fill();




</script>     
1 resposta
solução!

Olá Reginaldo, tudo bem com você?

Então, o beginPath esvazia todos os caminhos que estão na memória do "pincel", então é uma boa prática sempre que for criar uma nova parte do desenho (utilizando moveTo, lineTo, arc) para zerar os caminhos antigos.

No caso não atrapalhou em nada pois apenas tínhamos desenhados retângulos com a própria função, então o triângulo foi nosso primeiro desenho utilizando os caminhos do pincel, agora recomendo você comentar o segundo beginPath depois do pincel.fillStyle = 'blue'; e você verá que pode ter efeitos indesejados :)

Abraços e Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software