Resolução dinâmica com Prompt()

Realizei de maneira um pouco diferente, visando implementar os conhecimentos adquiridos até agora.

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

<script>
    var x = 0;
    var y = 0;
    var r = window.prompt("Digite o número total de quadrados:");
    var n = window.prompt("Digite o número de quadrados preenchidos:");    
    var i=0;
    var p = r-n;

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    function desenhaQuadrado(x, y, tamanho, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho);
}
    for (i=1; i<=n; i++) {
        desenhaQuadrado(x, y, 50, 'green');
        x+=50;       
    }
    for (i=1; i<=p; i++) {
        desenhaQuadrado(x, y, 50, 'white'); 
        x+=50;       
    }
</script>