Bndeira do Estados Unidos da America - Usando While para criar linhas.

Olá! Depois de fazer a bandeira do Brasil decidir fazer a dos EUA para praticar. A 1ª Versão do código ficou assim:

<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');

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

pincel.fillStyle = 'red';
        pincel.fillRect(0, 0, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 30.07, 600, 30.07);

        pincel.fillStyle = 'red';
        pincel.fillRect(0, 0, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 30.07, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 60.14, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 90.91, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 120.98, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 151.05, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 182.12, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 213.19, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 244.26, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 275.33, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 306.4, 600, 30,07);
        pincel.fillStyle = 'white';
        pincel.fillRect(0, 337.47, 600, 30,07);
        pincel.fillStyle = 'red';
        pincel.fillRect(0, 368.54, 600, 30,07);

    pincel.fillStyle = 'blue';
    pincel.fillRect(0, 0, 275, 210);

</script>

Então eu percebi que o código era cansativo para digitar, dai resolvi fazer usando o 'while', foi ai que bati cabeça durante toda essa manhã, foi muito cansativo mais o resultado foi gratificante o resultado foi:

<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');

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

    var contador = 1;
    var pulo = 0; 
    var larguraLinha = 30.07;
    var locaLinha = 0;

    while(contador <= 13){

            pincel.fillStyle = 'red';
            pincel.fillRect(0, locaLinha, 600, 30,07);
                pulo++;
                locaLinha = pulo * larguraLinha;

            pincel.fillStyle = 'white';
            pincel.fillRect(0, locaLinha, 600, 30,07);
                pulo++;
                locaLinha = pulo * larguraLinha;
                contador++;
        }

    pincel.fillStyle = 'blue';
    pincel.fillRect(0, 0, 275, 210);

</script>

Está ai o código a titulo de curiosidade e aprendizado, quem puder melhorar seria bom. Atenciosamente,