Por que na função desenhaQuadrado eu passo uma vez o parametro tamanho e depois tenho que passar 2 vezes o parametro tamanho dentro do do fillRect e do strokeRect ?

Olá, Kellvin, vamos ver se eu entendi a pergunta. Vou usar este exemplo para tentar explicar:

<script>
   function desenhaQuadrado(tamanho) {

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

        pincel.fillStyle = 'green';
        pincel.fillRect(tamanho, 0, 50, 50);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(tamanho, 0, 50, 50);

}

desenhaQuadrado(0);
</script>

Neste exemplo, o parâmetro tamanho refere-se à primeira coordenada do eixo x (primeiro valor do parênteses).

Ele precisa aparecer tanto no

fillRect (quadrado 1): preenchido (fill, em inglês) com a cor verde, sem contorno

quanto no

strokeRect (quadrado 2): sem preenchimento, com contorno (stroke, em inglês)

Para que seja exibido um quadrado preenchido com uma determinada cor (verde, neste exemplo) e contornado com outra cor (preto), na verdade, é como se desenhássemos dois quadrados, um sobre o outro.

Por isso, os dois devem partir do mesmo ponto (ponto 1: eixo x = 0 e eixo y = 0) e terminar no mesmo ponto (ponto 2: eixo x = 50 e eixo y = 50).

Então, são dois quadrados com as mesmas coordenadas:

um: contornado (preto) e não preenchido com cor

sobre o

outro: preenchido com cor (verde) e não contornado

Entende?

Bons estudos!

Olá Leila, muito obrigado!!!! entendi agora.