Fração informada pelo usuário

Coloquei uma caixa de diálogo com o prompt pra pedir o numerador e denominador, assim o programa faz a fração desenhada de acordo com o que a pessoa disser :) (só que teria que aumentar o tamanho do canvas pra frações maiores)

<script>    
    var numerator = prompt("digite o numerador da fração: ");
    var denominator = prompt("digite o denominador da fração: "); 

    var canva = document.querySelector("canvas");
    var brush = canva.getContext("2d");
    brush.fillStyle = "lightblue";
    brush.fillRect(0,0,600,400);
    brush.fill();

    brush.font="20px Georgia";
    brush.fillStyle="black";
    brush.fillText(("fração de " + numerator + "/" + denominator), 50,100);                

    function square(x,y,size,color){
        brush.fillStyle = color;
        brush.fillRect(x,y,size,size);
        brush.strokeRect(x,y,size,size);
    }

    var x = 0;
    while (x < (50*denominator)){
        if (x < (50*numerator)){
            square(x,0,50,"green");
        } else {
            square(x,0,50,"white");
        }
        x = x + 50;
    }
</script>