Simples, mas funcional | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Fiz uma versão em que o usuário insere os valores e o programa devolve o desenho. Ainda não descobri como puxar os valores de caixinha de input, mas ao invés de ficar quebrando a cabeça vou continuar avançando nos cursos até chegar nessa aula haha Por enquanto, vamos de prompt!

<html>

<canvas width="1000" height="1000">

<script>

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

var tamanho = 100;

function desenhaQuadrado(num, den) {
    pincel.fillStyle = 'pink';
    for (var n = 0; n < num; n = n + tamanho) {
        pincel.fillRect(n, 100, tamanho, tamanho);
    }
    pincel.strokeStyle = 'black';
    for (var d = 0; d < den; d = d + tamanho) {
        pincel.strokeRect(d, 100, tamanho, tamanho);
    }   
    desenhaTexto();
}

function desenhaTexto() {
    pincel.font = '30px Georgia';
    pincel.fillStyle = 'darkblue';
    pincel.fillText("O resultado da fração é:", 10, 50);
}

var numerador = prompt("Digite o numerador:")*tamanho;
var denominador = prompt("Digite o denominador:")*tamanho;

desenhaQuadrado(numerador, denominador);

</script>

</html>