Resolução com while e for

Segue abaixo o código:

<meta charset = "UTF-8">

<canvas width="700" height="500">

<script >

 function desenhaQuadrado(largura1, altura1, tamanho, cor, ){

    var tela = document.querySelector("canvas");

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

    pincel.fillStyle = cor;

    pincel.fillRect(largura1, altura1, tamanho, tamanho);

    pincel.fillStroke = 'black';

    pincel.strokeRect(largura1, altura1, tamanho, tamanho);


    }

 function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    desenhaTexto('Qual é a fração? ', 50, 30);

    var contador = 50;

       while(contador < 450){

          desenhaQuadrado(contador, 50, 100, 'white', );

           contador = contador + 100;

        }


        for(var largura1 = 50; largura1 < 350; largura1 = largura1 + 100){

            desenhaQuadrado(largura1, 50, 100, 'green');

        }


</script>