Exercício da fração - proposta

Montei um código que peça que fração você gostaria de representar indicando o numerador e o denominador. Se alguém puder dar uma olhada, não sei se daria para tornar esse código mais limpo...

<meta charset="utf-8">
<h1>Frações</h1>
<div>
  <p>Frações são representadas da seguinte maneira:</p>

  <p><img src="https://pt-static.z-dn.net/files/dc7/596c6224465d178c237a7901bb52eb99.jpg"></p><br><br>

  <p>Para saber como representar uma fração por desenhos, insira abaixo o numerador e o denominador da sua fração> </p>

  <label>Numerador:</label>
  <input type="number" name="numerador" id="numerador"><br><br>
  <label>Denominador:</label>
  <input type="number" name="denominador" id="denominador"><br><br>
  <button onclick="representa()">Representar</button>

<h2></h2>

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

<script>

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

var todo = parseInt(document.getElementById('denominador').value);
var cheio = parseInt(document.getElementById('numerador').value);
var fracao = document.querySelector("h2");

var x = 0;

function representa() {
  var todo = parseInt(document.getElementById('denominador').value);
  var cheio = parseInt(document.getElementById('numerador').value);
  telaBranca();
  x = 0;
  y = 0;
  desenha();
}

function telaBranca(){
  pincel.fillStyle = 'white';
  pincel.fillRect(0, 0, 600, 600);
}

function desenha() {
  var todo = parseInt(document.getElementById('denominador').value);
  var cheio = parseInt(document.getElementById('numerador').value);
  fracao.innerHTML = cheio + "/" + todo + " é a fração representada abaixo"


  if (cheio <= todo) {
    while (x < todo * 50) {
      while (x < cheio * 50) {
        desenhaQuadrado(x, 0, 'green');
        x += 50;
      }
      desenhaQuadrado(x, 0, 'white');
      x += 50;
    }
  }

  if (cheio > todo) {
    var y = 0
    var resto = cheio
    while (resto >= todo) {    
      partesMaiorQueTodo(x, y);
      resto -= todo;
      y += 70;
    }
    if (resto > 0) {
      while (x < todo * 50) {
        while (x < resto * 50) {
          desenhaQuadrado(x, y, 'green');
          x += 50;
        }
        desenhaQuadrado(x, y, 'white');
        x += 50;
      }
    }
  }
}

function partesMaiorQueTodo(x, y) {
  var todo = parseInt(document.getElementById('denominador').value);
  var cheio = parseInt(document.getElementById('numerador').value);

  while (x < todo * 50) {
    desenhaQuadrado(x, y, 'green');
    x += 50;
  }
}

function desenhaQuadrado(x, y, cor) {
  pincel.fillStyle = cor;
  pincel.fillRect(x, y, 50, 50);
  pincel.fillStroke = 'black';
  pincel.strokeRect(x, y, 50, 50);
}



</script>