Decidi reescrever esse código de forma a deixá-lo menos verboso e até deixando automático a quantidade de quadrados que queremos imprimir, pois sempre estamos falando de um código legível e de fácil manutenção.
obs.: Não sei se é uma boa prática jogarmos uma função para dentro da estrutura do 'for', vou pesquisar a respeito mas vou deixar esse código aqui antes hahaha
<canvas width="600" height="400"></canvas>
<script>
//Y = Altura;
//X = Comprimento;
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//tela na cor cinza, só porque eu acho mais bonitin.
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function escreve(texto, x, y) {
pincel.font = '20px Georgia';
pincel.fillStyle = 'black';
pincel.fillText(texto, x, y);
}
function desenhaQuadrado(x, y, tamanho, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho);
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, tamanho, tamanho);
}
function quantidadeDeQuadrados(quantidadeDesejada) {
var resultado = (quantidadeDesejada * 50) + 50;
//A quantidade desejada de quadrados deve ser multiplicada por 50, que é tamanho padrão dos nossos quadrados.
return resultado;
//Aqui eu precisei retornar o valor da conta efetuada acima.
}
escreve('Qual é a fração?', 50, 40);
//Looping onde declaramos a quantidade de quadrados que serão impressos.
//A quantidade de quadrados fica limitada a 10 conforme o tamanho da nossa tela/canva.
for (let i = 50; i < quantidadeDeQuadrados(3); i = i + 50 ) {
desenhaQuadrado(i, 50, 50, 'green');
pincel.strokeRect(i+50, 50, 50, 50);
//para criar apenas a borda do último quadrado eu somei o valor de 'i' + 50.
}
</script>