Olá! Eu utilizei a estrutura "while" para preencher automaticamente os 3 quadrados e criei um condição "if" para desenhar o último em branco. Lembrando que poderíamos, também, desenhar o texto na própria HTML com as tags abaixo: <"h1>Que Fração é essa?(Sem as aspas duplas). Mas minha dúvida é o seguinte: Por que precisamos declarar novamente as variáveis tela e pincel dentro da função "desenhatexto"?
<canvas width = "600" height = "400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaquadrado (x, y, collor){
pincel.fillStyle = collor;
pincel.fillRect(x, y, 50, 50);
pincel.fillstroke = 'black';
pincel.strokeRect (x, y, 50, 50);
}
function desenhatexto (texto, x, y){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font = '20px Georgia';
pincel.fillStyle = 'black';
pincel.fillText (texto, x, y);
}
var x = 0
while (x < 150) {
desenhaquadrado(x, 50, 'green');
x = x + 50;
}
if(x = 150){
desenhaquadrado(x,50,'white');
}
desenhatexto ('Que Fração é essa?', 20,25);
</script>
