Fiz um código que recebe o numerador e o denominador do usuário:

Oi gente! Na minha solução eu fiz dois "prompts" pra perguntar ao usuário qual o numerador e o denominador da operação, determinando assim diferentes frações. Espero que gostem!

<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);
}


var numerador = parseInt(prompt("Qual o numerador?"));
var denominador = parseInt(prompt("Qual o denominador?"));

var x = 0;

var contador = 1;



while(contador <= numerador) {
    desenhaQuadrado(x,0,50, 'green');
    x = x + 50;
    contador++;
}

var contador = 1;

while(contador <= (denominador - numerador)) {
    desenhaQuadrado(x, 0, 50, "white");
    x = x + 50;
    contador++;
}

</script>