Bandeira da Itália (falha e corrigida)

Olá!! fui começar o curso e como primeiro teste fui fazer a bandeira da Itália por ser simples em formato e cores.

Quando fiz pela primeira vez acabei fazendo esse código:

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

<script>

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

    // usei lightgray para ter noção do fundo pintado
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 0, 200, 133,33);

    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(400, 166,66, 600, 400);


</script>

Após ter visto este resultado:

Entendi que minhas coordenadas e minhas cores estavam erradas. Tudo funciona de forma simples em gráfico de coordenadas de x, y. Arrumei minhas cores e coordenadas!

Corrigi meu erro e o código e o resultado foi esse:

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');
    // Agora white porquê sei que vai ser certo
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

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

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


</script>

e a bandeira:

Aprendendo bastante só com a primeira aula! muito feliz de estar aprendendo a programar.