Explicação do código passo a passo para criar os triângulos

Irei postar a cada exercício que o professor trouxer na aula a explicação do passo a passo de como foi feito.

As vezes explicando pelo meu ponto de vista e como entendi ajude alguém que tenha dúvidas.

Espero ter ajuda. Sucesso na sua jornada!!

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

<script>

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

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

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

    // Para iniciarmos o triângulo temos que entender que o Eixo X (Largura) vai de 0 a 600 e o Eixo Y (Altura) vai de 0 a 400

    pincel.fillStyle = "yellow"; // preciso escolher a cor antes de começar a fazer as linhas, senão irá pintar com a última cor usada
    pincel.beginPath(); // aqui eu indico que irei iniciar o caminho, as linhas
    pincel.moveTo(300,200); // indiquei que coloquei o pincel para iniciar na posição do eixo X em 300 e na posição do eixo y em 200
    pincel.lineTo(200,400); // criei uma linha que vai da posição inicial até a posição do eixo X em 200 e do eixo Y em 400
    pincel.lineTo(400,400); // criei uma linha que vai da última posição até a posição do eixo X em 400 e do eixo Y em 400
    pincel.fill(); // com a função .fill eu pedi para que fosse preenchida essas linhas

    // Notem que não precisou ser feita uma outra linha fechando o triângulo para que pudesse ser feito o preenchimento. Não sei se o sistema já entende que aquele é último ponto e automaticamente "fecha" a linha do último ponto com o ponto inicial e faz o preenchimento. Eu creio que seja por aí, pois deu certo kkk. 

</script>