Minha solução, falta incrementar e arrumar algumas coisas:

<h1>Qual é a fração?</h1>
<p style="margin-left: 50px; font-weight: bold"></p>
<div>
  <canvas width="600" height="400"></canvas>
</div>

<script>
  desenhaQuadrado = (x, y, cor) => {
    let tela = document.querySelector("canvas");
    let pincel = tela.getContext("2d");
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, 50, 50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x, y, 50, 50);
  };

  let text = document.querySelector("p");

  fracao = (denominador, numerador) => {
    for (let i = 0; i < denominador; i += 50) {
      desenhaQuadrado(i + 200, 0, "white");
    }
    for (let j = 1; j < numerador; j += 50) {
      desenhaQuadrado(j + 200, 0, "green");
    }
  };

  mostraTexto = (texto) => {
    return texto;
  };

  pulaLinha = (total) => {
    for (let i = 0; i < total; i++) {
      document.write("<br>");
    }
  };

  calculaFracao = (d, n) => {
    fracao((d * 100) / 2, (n * 100) / 2);
    text.innerHTML = mostraTexto(` ${n}
    <hr style="width: 10px;margin-left:0;" />
                  ${d}`);
  };

  let numerador = prompt("Informe o numerador");
  let denominador = prompt("Informe o denominador");

  calculaFracao(denominador, numerador);
</script>