Usando for e if para criar os quadrados

Puxa, bem criativa a sua solução Lucas. Pra chegar ainda mais além, o que você acha de um pequeno desafio? Como você deixaria esse desenho de frações de forma dinâmica de forma que eu chame apenas uma função, passe a quantos quadros serão desenhados e quantos deles serão pintados?

Ex:

desenhaFracao(4, 1);

Dessa chamada, devo ter 4 quadrados, mas apenas um deles pintado. Como ficaria esse código?

após quebrar um pouco a cabeça, cheguei a esta possível solução, alguma dica de como poderia melhorar este código?

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

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

    var x = 0;
    var y = 50;
    var z = 0
    var tamanho = 50;

    function desenhaTexto(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.fillStroke = "black";
        pincel.strokeRect(x, y, tamanho, tamanho);

    }

    function desenhaFracao(quantidadeQuadrados, quadradosPintados) {

        var termina = false;
        var contador = 0;
        var contadorCor = 0;

        while(contador <= quantidadeQuadrados) {

            contador++;
            x = x + 50;
            desenhaQuadrado(x, y, tamanho, "white");
            desenhaTexto("Qual é a fração?", 50, 30);

            if(contador == quantidadeQuadrados) {

                termina = true
                break;
            }
        }

        while(contadorCor <= quadradosPintados) {

            contadorCor++;
            z = z + 50
            desenhaQuadrado(z, y, tamanho, "green");

            if(contadorCor == quadradosPintados) {

                termina = true
                break;
            }
        }
    }

    desenhaFracao(4, 1);

</script>

Hm, o código dos dois whiles são praticamente iguais, você consegue pensar em uma forma de fazer um while só?

Oi Lucas existem muitas soluções para este exercício a sua é uma delas, você escolheu utilizar dois "for" compartilho uma solução utilizando for e if:

<canvas width="600" height="400"></canvas>

<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x,y,tamanho,tamanho);
    pincel.strokeRect(x,y,tamanho,tamanho);
}
pincel.font='20px Georgia';
pincel.fillText('Qual é a fração ?',0,30);
for(var x=0,y=50,tamanho=100,cor='green';x<=350;x+=100){
  if(x>250){
    desenhaQuadrado(x,y,tamanho,"white");
  }else{
    desenhaQuadrado(x,y,tamanho,cor);
  }
}
</script>

Apenas pra demonstrar uma outra resolução.

Que bom que você já consegue usar a estruturas de repetição para simplificar processos repetitivos esse é um marco importante desse curso de lógica.Além do de encapsular essas lógicas em funções, espero que esteja aprendendo bastante , qualquer dúvida manda aí.

Espero ter ajudado e bons estudos.