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>
