Bandeira da Itália com explicações dentro do código de como foi o processo de criação

Vou começar a postar aqui os exercícios resolvidos que o professor propõe com explicações do processo, Para ajudar alguém que possa não ter pegado algum detalhe.

Espero ter ajudado. Sucesso na sua jornada!!

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

<script>

    //criei no mundo HTML o Canvas de largura 600 por 400 de altura

    var tela = document.querySelector("canvas"); //conectei o canvas por meio da variável 'tela' no JavaScript
    var pincel = tela.getContext("2d"); //criei o pincel a ser usado no canvas e tudo que eu executar com esse pincel será usado no canvas

    pincel.fillStyle = "green"; //atribui a cor verde ao meu pincel e agora posso indicar como irei usá-lo 
    pincel.fillRect(0, 0, 200, 400);//falo para o pincel que quero inicie no eixo X no ponto 0, iniciei no eixo Y no ponto 0, termine na  largura 200, termine na altura 200. 

    pincel.fillStyle = "red"; // atribuir a cor vermelha ao meu pincel e agora posso indicar como irei usá-lo
    pincel.fillRect(400, 0, 200, 400); //falo para o pincel que quero inicie no eixo X no ponto 400, iniciei no eixo Y no ponto 0, termine na  largura 200, termine na altura 400.

    // Do código 'pincel.fillRect(400, 0, 200, 400);' se eu quero tratar da Largura eu uso a 1ª e 3ª posição e se quero tratar da altura eu uso a 2ª e a 4ª posição para dizer onde inicio e onde termino. Nas posições 3ª e 4ª você diz, na verdade o TAMANHO que você quer tenha a Largura e Altura, respectivamente.

    // Um detalhe quando faço a bandeira vermelha: Se eu tenho uma bandeira que tem a largura de 600, é porque vai de 0 a 600. Se eu inicio no ponto 400 a pintura, então eu precido que a pintura tenha a largura de 200 para poder terminar de preencher, pois do ponto 400 até o ponto 600 faltam 200. Por isso quendo eu construo o código eu indico na 1ª posição 400 (nessa posição eu começo a pintar) e indico na 3ª posição 200 (o tamanho que quero que tenha).

</script>