Não consigo entender o exercício sobre gráficos de navegadores | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<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++) {
            var altura = serie[i]
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i])
            somaAltura = somaAltura + altura
        }


   }


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

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


// não consigo compreender a parte da função desenhaBarra
</script>

Olá, Gabriel! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Quando invocamos a função desenhaBarra perceba que colocamos os seguintes parâmetros: x, y, serie2015 ou serie2016, cores e o texto

desenhaBarra(50, 50, serie2015, cores, '2015');

Dessa forma, esses parâmetros já estão sendo esperados lá na função

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

        desenhaTexto(x, y - 10, texto)

        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++) {
            var altura = serie[i]
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i])
            somaAltura = somaAltura + altura
        }
   }

Agora vamos destrinchar essa função!!! =D

Assim que receber esses parâmetros ele irá para uma outra função dentro da função para desenhar o texto com os valores que colocamos na invocação. Neste caso o valor de X (50), o valor de Y (50) - 10 e o Texto (2015)

O próximo passo vai guardar a soma da altura das "barrinhas" para fazer a escala de cores a cada looping

Vamos ao For

No For a variável i começará com zero e enquanto o valor de i for menor que o tamanho da array (tamanho do "grupo" de valores dentro da serie2015, ele executará esse For

Quando descer, ele vai guardar o primeiro valor da array serie2015 na variável altura, no caso 50.

Agora ele chamará uma outra função chamada desenhaRetangulo, que vai pegar o valor de X que colocamos, o valor de Y + a soma da altura (que no momento inicial é zero), o valor 50 (largura), a altura (50 como citamos acima) e a primeira cor, por se tratar de uma array de cores

O último passo vai pegar a variável somaAltura, que até então comecou com zero e vai somar esse zero + altura (50)

Voltaremos para o i++ do for e o i não vale mais zero. Agora vale 1 e repetimos todo o processo novamente.

Como nossa array de series possuem quatro valores, enquanto o valor de i for menor que 4, ele fará esse processo

Espero ter deixado mais claro, Gabriel!

Caso fique algo pendente, me dê um retorno!

Um abraco e bons estudos!!

PRORROGAMOS O DESCONTO!