dúvida quanto ao uso de variantes auxiliares para manipular valores de uma outra variável | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Bom dia pessoal,

Acredito que eu tenha entendido o conceito do uso da variável auxiliar somaAltura durante o uso da função desenhaBarra, mas gostaria por via das duvidas ter certeza se eu realmente entendi o conceito, também se possivel dicas de como montar uma função que mostre na tela este processo toda vez que o loop occore qual valor é adcionado cada vez que executa o loop for( var i=0; i < serie.length; i++) nas posições [0], [1], [2] e [3] do vetor, ja que parar montar essa ideia rabisquei no papel o processo por inumeras vezes e ainda nao tenho certeza se na funcao desenhaRetangulo(y + somaAltura) na posicao [0] ou seja inicial do vetor seria 50 o valor inicial de y + 0 valor inicial de somaAltura ou seria 100 ja que no complemento da função somaAltura = somaAltura + altura, implementaria ou nao no primeiro loop ( y+ somaAltura) sendo 50+ 50 = 100. Acredito que esse valor passa ser apartir do segundo loop como descrevi abaixo:

function desenhaBarra(x, y, serie, cores, texto){ 
   desenhaTexto(x, y-10, texto); 
   var somaAltura = 0; // variavel auxiliar somaAltura recebe o valor '0' 

   for (var i = 0; i < serie.length; i++){    
   var altura = serie[i];

   // laço for para percorrer o vetor serie[i] / atribuida a variavel altura que recebera o valor de serie[i]  toda vez que o                                                                        for percorrer serie.


       desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
       somaAltura = somaAltura + altura;

    /* a funcao desenhaRetangulo(); chamada dentro da funcao desenhaBarra(); recebe os valores ( x ,y, largura, altura, cores[i])
    onde o loop for atribui os seguintes valores acredito eu : 
    1st loop ( 50, 50, 50, 50, 'blue' );    - mostra a posiçao inicial onde o valore de y = 50 + somaAltura = 0
                    ( 150, 50, 50, 65, 'blue');      
    entao, 

    2nd loop(50, 100, 50, 25, 'green'); 
                    (150, 115, 50, 20, 'green' );
    entao,             
    3rd loop ( 50, 125, 50, 20, 'yellow');
                    (150, 135, 50, 13, 'yellow');
    entao                 
    4th loop ( 50, 145, 50, 5, ' red'); 
                    (150, 148, 50, 2, 'red');

    stopped.                 
    */
   }
}

   var cores = ['blue', 'green', 'yellow', 'red'];   
   var serie2015 = [50, 25, 20, 5]; 
   var serie2016 = [65, 20, 13, 2]; 

   desenhaBarra(50, 50, serie2015, cores, '2015');
   desenhaBarra(150, 50, serie2016, cores, '2016');

/* dessa maneira os retangulos serao apresentados apos a funcao desenhaBarra(); ser executada um seguido do outro seguindo a posição de y+ somaAltura que seria o mesmo no indicado na figura ?
*/

</script>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Boa noite Hermes, tudo certo?

Primeiramente, parabéns por ter exemplificado qual era a sua dúvida de forma tão clara e documentado o seu processo e raciocínio. Essa habilidade é essencial no ramo da tecnologia, pois muito provavelmente você terá colegas para compartilhar o trabalho e assim você já está num ótimo caminho.

Agora sobre a questão que você trouxe: eu vou te mostrar uma forma de como você pode investivar o que está acontecendo no seu código de uma forma bem prática. Existe uma funcionalidade no JavaScript chamada de template string (ou template literals) que permite intercalar strings e códigos que serão executados de forma bem prática. Exemplo:

console.log(`A soma de 2 + 2 é igual a ${2 + 2}`);

Esse código vai imprimir no console o texto

"A soma de 2 + 2 é igual a 4"

Ou seja, utilizamos o caractere ` para delimitar a template string e o código que colocarmos entre ${} será avaliado como JavaScript e o resultado é inserido na string.

Então eu fiz o seguinte dentro do projeto no laço for em desenhaBarra:

console.log(`Indice:${i} - Valor da série: ${serie[i]} - X:${x} - Y:${y} - Altura:${altura}  SomaAltura:${somaAltura}`);
console.log(`Valores na chamada de desenhaRetangulo: ${x}, ${y+ somaAltura}, ${50}, ${altura}, ${cores[i]}`);

E quando eu olhei o console na página do projeto, obtive o resultado:

Indice:0 - Valor da série: 50 - X:50 - Y:50 - Altura:50  SomaAltura:0 
Valores na chamada de desenhaRetangulo: 50, 50, 50, 50, blue 
Indice:1 - Valor da série: 25 - X:50 - Y:50 - Altura:25  SomaAltura:50 
Valores na chamada de desenhaRetangulo: 50, 100, 50, 25, green 
Indice:2 - Valor da série: 20 - X:50 - Y:50 - Altura:20  SomaAltura:75
Valores na chamada de desenhaRetangulo: 50, 125, 50, 20, yellow 
Indice:3 - Valor da série: 5 - X:50 - Y:50 - Altura:5  SomaAltura:95 
Valores na chamada de desenhaRetangulo: 50, 145, 50, 5, red 
Indice:0 - Valor da série: 65 - X:150 - Y:50 - Altura:65  SomaAltura:0
Valores na chamada de desenhaRetangulo: 150, 50, 50, 65, blue
Indice:1 - Valor da série: 20 - X:150 - Y:50 - Altura:20  SomaAltura:65 
Valores na chamada de desenhaRetangulo: 150, 115, 50, 20, green 
Indice:2 - Valor da série: 13 - X:150 - Y:50 - Altura:13  SomaAltura:85 
Valores na chamada de desenhaRetangulo: 150, 135, 50, 13, yellow 
Indice:3 - Valor da série: 2 - X:150 - Y:50 - Altura:2  SomaAltura:98 
Valores na chamada de desenhaRetangulo: 150, 148, 50, 2, red

Assim, como você pode observar a ordem na qual as mensagens foram inseridas, fica claro a ordem na qual as instruções foram executadas. Qualquer coisa, segue o código que eu utilizei:

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

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    function desenhaBarra(x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto);
        var somaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            setTimeout( () => {}, 1000);
            var altura = serie[i];
            console.log(`Indice:${i} - Valor da série: ${serie[i]} - X:${x} - Y:${y} - Altura:${altura}  SomaAltura:${somaAltura}`);
            console.log(`Valores na chamada de desenhaRetangulo: ${x}, ${y+ somaAltura}, ${50}, ${altura}, ${cores[i]}`);
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

</script>

Caso ainda tenha ficado alguma dúvida, não hesite em perguntar. Continue assim e bons estudos!