Olá, Guilherme!

Uma coisa que você precisa lembrar da Aula 1 é como funcionam as coordenadas do Canvas. Lembre-se dessa imagem:

Quanto maior o X, mais pra direita. Quanto maior o Y, mais pra baixo.

Se você pegar o Y, por exemplo, e subtrair 10, vai ser um pouquinho pra cima. Se somar 10, vai ser um pouquinho pra baixo.

Com o X é parecido: se subtrair 10, vai ser um pouquinho para esquerda. Se somar 10, vai ser um pouquinho pra direita.

O que queremos fazer é o seguinte:

Teremos: - um texto: no caso, "2015" ou "2016" - 4 retângulos: um azul, outro verde, outro amarelo e um vermelho, cada um na mesma posição horizontal mas um pouquinho mais pra baixo na vertical. Ou seja, o x mantém-se parecido mas o Y vai sempre aumentando.

A imagem a seguir ajuda a mostrar esse detalhe:

A largura dos retângulos será sempre 50.

A altura vai variar. De onde ele tira a altura? De um array chamado serie, que terá 4 valores de altura, um pra cada retângulo.

No caso de 2015, o array serie terá: [50,25,20,5]. Ou seja, a posição 0 será 50, a 1 será 25, a 2 será 20 e a 3 será 5.

Vamos focar na chamada da função desenhaBarra() para o ano de 2015:

var cores = ['blue','green','yellow', 'red'];
var serie2015 = [50,25,20,5];
desenhaBarra(50, 50, serie2015, cores, '2015');

Vamos lembrar os parâmetros da função desenhaBarra():

function desenhaBarra(x, y, serie, cores, texto) {
    //restante do código...
}

Então, os dois primeiros parâmetros definem o valor de x e de y: ambos 50.

O parâmetro serie terá aquele array: [50,25,20,5]

O parâmetro cores terá o array ['blue','green','yellow', 'red']. A posição 0 é blue (azul), a 1 é green (verde), a 2 é yellow (amarelo) e a 3 é red (vermelho).

O texto é "2015", que será a primeira coisa a ser desenhada:

desenhaTexto(x, y - 10, texto);

Como x e y são 50 e o texto é "2015", o texto começará a ser desenhado nas posições 50 (horizontal) e 40 (50 - 10, vertical).

Então, é definida a variável somaAltura:

var somaAltura = 0;

É feito um for que vai do início ao fim do array serie:

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

O valor da variável i, do for, vai de 0 até enquanto for menor que o tamanho do array. Então, terá os valores 0, 1, 2 e 3.

O for será chamado então essas 4 vezes.

Da primeira vez - i é 0 - somaAltura é ainda 0.

Então, é definida a variável altura:

var altura = serie[i];

Como i é 0, será obtida a primeira posição (a posição 0) de serie, que é o valor 50, que é colocado na variável altura.

Então é chamada a função desenhaRetangulo():

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

Os parâmetros serão: - x, que é 50 - y + somaAltura, que é 50 + 0 - 50, que é o valor da largura do retângulo - alturaque é 50 - cores[i], que é a primeira cor, blue

Então, a somaAltura é incrementada com o valor de altura:

somaAltura = somaAltura + altura;

Portanto, somaAltura passará a ser 0 + 50. Ou seja, passará a ser 50.

Não há mais nada no for.

É feito o i++, que passa a ser 1, e é comparado com serie.length (o tamanho do array). Como 1 ainda é menor que 4, entramos dentro do for, com:

• i é 1
• somaAltura é 50.

Então, é obtido o valor da variável altura novamente:

var altura = serie[i];

Só que agora ié 1. Por isso, altura será 25, que é a segunda posição (a posição 1) do array serie.

Então, a função desenhaRetangulo() é chamada novamente com os parâmetros: - x, que continua 50 - y + somaAltura, que é 50 + 50, ou seja, 100 que fica abaixo do outro retângulo - 50, que é o valor da largura do retângulo - alturaque é 25, um pouquinho menor que o outro retângulo - cores[i], que é a segunda cor, green

E por aí vai!