RESOLUÇÃO: COM LAÇO DE REPETIÇÃO

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

<script>

    function desenhaQuadrado(x, y){

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


    for(i = 1; i<= y; i++){
    pincel.fillStyle = 'white';
    pincel.fillRect(tamanho_denominador, 0, 50, 50);
    pincel.fillStroke = 'black';
    pincel.strokeRect(tamanho_denominador, 0, 50, 50)
    tamanho_denominador = tamanho_denominador + 50;

   }

    var tamanho_numerador = 0;
    for(i = 1; i <= x; i++){
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(tamanho_numerador, 0, 50, 50);
    pincel.fillStroke = 'black';
    pincel.strokeRect(tamanho_numerador, 0, 50, 50);

    tamanho_numerador = tamanho_numerador + 50;

}
}

    desenhaQuadrado(5, 8);

</script>