Meu código para desenhar a fração em quadrados cheios e vazios

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    function desenhaQuadrado(x, y, cor){

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);

    }

    function desenhaBorda(x, y, cor){
        pincel.strokeStyle = cor;
        pincel.fillStroke = cor;
        pincel.strokeRect(x, y, 50, 50);
    }

    function desenhaFracao(numerador, denominador){

        for(var x = 0; x < numerador * 50; x += 50){
            desenhaQuadrado(x + 50, 50, 'green');
        }

        for(var x = 0; x < denominador * 50; x += 50){
            desenhaBorda(x + 50, 50, 'black');
        }

    }

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

    desenhaTexto("Qual é a fração?", 50, 30);
    desenhaFracao(3, 4);

</script>