Ola Jose,
Sou novato na área tbm e algumas vezes fico mais de 1 dia tentando resolver um problema, até durante o sono rsrsrsr. Acho que isso é bom que acaba ajudando a pensar em varias coisas e fixando melhor as coisas. Por isso não vou colocar por definitivo a solução aqui, mas vou corrigir algumas coisas e lhe dar uma ideia para a resolução do exercício.
A primeira observação, é quanto aos dados gerais que foi colocado dentro da função e quando voce chama estes dados em "desenhaBarra(50, 50, serie2015, cores, '2015');" eles não estão acessíveis por isso eles tem que estar declarados antes da chamada "desenhaBarra"
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');
Outra observação e quando ao desenho dos retângulos de cada série. No seu código está o seguinte:
serie = cores[i];
pincel.fillStyle=cor;
pincel.fillRect(x,y, 100, serie);
pincel.strokeStyle='black';
pincel.strokeRect(x,y, 100, serie);
A linha "serie = cores[i];" está errada e tbm não era necessária, pois voce poderia fazer direto "pincel.fillStyle=cores[i];", mas aproveitando seu cógido poderia corrigir a linha "serie = cores[i];" para "cor = cores[i];"
Quanto as linhas "pincel.fillRect(x,y, 100, serie);" e "pincel.strokeRect(x,y, 100, serie);" a variável "serie" se trata de um vetor com diversos número, então faltou acrescentar o ponteiro "i" para indicar qual posição você ira pegar os dados. Corrigindo o problema, você terá que alterar "serie" para "serie[i]".
Agora a ultima é mais importante que deixarei para voce solucionar e caso nao consiga avise que completo para voce, mas acho importante você tentar resolver.
Dica:
Cada série possui retangulos que vão se completando um em baixo do outro.
Por exemplo: serie2015
|------------|
| blue |
|------------|
| green |
|------------|
| yellow |
|------------|
| red |
|------------|
Observe que todos os retangulos estão na mesma coordenada "x" o que varia é a coordenada "y" pois cada retangulo é desenhado um em cima do outro.
Quando ó primeiro retangulo é desenhado, a altura dele vai ser a posição inicial para o proximo retangulo e assim sucessivamente ate o ultimo.
Você precisa trabalhar esta informação para que toda vez que o "for" seja executada dentro da função "desenhaBarra" a posição "y" varie a cada desenho e não fique fixa como voce fez no seu codigo
pincel.fillRect(x,y, 100, serie);
pincel.strokeRect(x,y, 100, serie);
Espero não ter lhe confundido e caso não consiga resolver ou ainda tenha dúvida, nos avise que sempre tem alguém aqui no forum para ajudar.
Abraços!
