Frações entendendo as coordenadas da função

Referente a função desenhaQuadrado não consegui compreender a lógica das medidas das coordenadas até certo ponto,

var y = 50;
    desenhaQuadrado(50, y, 100, 'green');
    desenhaQuadrado(150, y, 100, 'green');
    desenhaQuadrado(250, y, 100, 'green');
    desenhaQuadrado(350, y, 100, 'white');

se o primeiro quadrado o "x" é igual a 50 partindo dessa coordenada e o "y" também por se tratar de um quadrado, quando chega na parte do tamanho ele se unifica sendo igual a 100 (no caso o ponto de partida 50 + 50 do 1º quadrado) , o 2º aumenta com + 50 que é referente ao largura do quadrado ficando com "x" igual a 150, assim a minha dúvida se refere a próxima coordenada do 3º quadrado por que é igual a 250? No caso cada lado é igual a 50 o outro quadrado ao lado também possui a mesma medida e assim sucessivamente, no meu entendimento o próximo "x" do 3º quadrado seria igual a 200, pois 150 + 50 é igual a 200, não entendi a lógica.

Olá! Tudo bom contigo? Espero que sim :)

Antes de tudo, agradeço a paciência em aguardar uma resposta!

Quando criamos a função desenhaQuadrado(), também adicionamos alguns parâmetros:

x: Posição x (horizontal) do quadrado;
y: Posição y (vertical) do quadrado;
tamanho: Medida dos lados do quadrado;
cor: Cor de preenchimento da forma.

Os dois primeiros parâmetros fazem referência à posição do primeiro vértice (superior esquerdo) do quadrado; a partir destes valores, podemos criá-lo por meio do método fillRect().

Enquanto a posição y permanece a mesma, a coordenada x é alterada. Além disso, o seu valor é acumulativo, se fôssemos descrever o que ocorre no código em relação ao parâmetro x, teríamos algo desta forma:

1° Quadrado: x = 50
2° Quadrado: x = 50 + 100 = 150
3° Quadrado: x = 150 + 100 = 250
4° Quadrado: x = 250 + 100 = 350

A partir do segundo quadrado, sempre somamos a distância horizontal do quadrado anterior com a medida do seu lado (a medida do lado vale 100). Isso é necessário para que todas as formas geométricas fiquem em sequência; caso contrário, cada quadrado irá sobrepor o anterior.

Caso possua dúvidas com relação a minha explicação ou ao decorrer dos seus estudos, sinta-se confortável para enviá-las ao fórum. Fico à disposição!

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.