Aula 09 Frações - Capítulo 2

Olá, fiz o meu código utilizando 'for', mas não ficou muito claro pra mim por que funcionou, ou o que não funcionou.

<meta charset="UTF-8">
<canvas width="700" height="500"></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.strokeStyle = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    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);    
}

    for(var x = 25; x < 225; x = x + 50)    {

        desenhaQuadrado(x, 100, 50, 'green');    

        if(x == 175) {

            desenhaQuadrado(x, 100, 50, 'white');
        }

    }

    desenhaTexto("Qual é a fração?", 50, 30);

</script>

Quando eu pensei no problema eu havia escrito o seguinte:

    for(var x = 25; x < 175; x = x + 50)    {

        desenhaQuadrado(x, 100, 50, 'green');    

        if(x == 175) {

            desenhaQuadrado(x, 100, 50, 'white');
        }

Pensei que quando a condição de que X tem o valor de 175, ele executaria a função desenhaQuadrado() novamente, na cor branca. Não deu certo, ele desenha apenas os 3 quadrados verdes.

Então, alterei a condição do 'for' para x < 225, que seria o local do 4 quadrado que seria pintado de verde e funcionou, com o quadrado aparecendo branco.

Minha ideia original era 'desenhe 3 quadrados e depois desenhe um quarto quadrado branco com o stroke preto' O que consegui foi desenhe 4 quadrados verdes e depois pinte o ultimo de branco??

outra dúvida sobre a aula: Quando o professor apresenta a função desenhaTexto() ele coloca as variáveis

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

Essas variáveis já não estavam lá no início do nosso script, por que colocá-las dentro da função novamente?