Ele pergunta o numerador e o denominador, o máximo é 12 porque esse é o tamanho da tela. Fica estranho quando o numerador é maior que o denominador. Antes de usar "while", eu usei o "for", mas n funcionou.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaQuadrado(x, y) {
pincel.fillStyle = 'green';
pincel.fillRect(x, y, 50, 50);
}
function desenhaBorda(x, y) {
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, 50, 50);
}
function desenhaFracao (numerador, denominador) {
var deslocamentoDoQuadrado = 0;
var contador = 1;
while(contador <= numerador) {
desenhaQuadrado(0 + deslocamentoDoQuadrado, 0);
deslocamentoDoQuadrado = deslocamentoDoQuadrado + 50;
contador++;
}
var deslocamentoDaBorda = 0;
var contador2 = 1;
while(contador2 <= denominador) {
desenhaBorda(0 + deslocamentoDaBorda, 0);
deslocamentoDaBorda = deslocamentoDaBorda + 50;
contador2++;
}
}
var numerador = parseInt(prompt("Insira o numerador"));
var denominador = parseInt(prompt("Insira o denominador"));
desenhaFracao(numerador, denominador);
</script>