Outra versão - Frações - Logica de programação 2

*Editado Fiz um modelo em que as frações são aleatórias, para quem está aprendendo ter outros modeloa para ver, de forma aleatória. Aceito criticas e sugestões para melhorar.

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>

    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.fillStroke='black';
        pincel.strokeRect(x,y,tamanho,tamanho);
    }
    function desenhaVazio(x,y,tamanho,cor){
        pincel.fillStyle=cor;
        pincel.fillRect(x,y,tamanho, tamanho);
        pincel.fillStroke='black';
        pincel.strokeRect(x,y,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);    
    }

    function fracao(preenchido, vazio){

        var preenchido = Math.round(Math.random() * 5);
        var vazio = Math.round(Math.random() * 5);
        for(x=0; x <= (preenchido * 50); x = x + 50){
            desenhaQuadrado (x,70,50,'green') ;
        }
        for(x=0; x < (vazio * 50); x = x + 50){
            desenhaVazio (x + preenchido * 50, 70, 50, 'white');
        }
    }

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

</script>