Boa tarde, fui fazer esse exercício e acabei demorando um pouco mais que os outros, justamente porque quando fui fazer o desenhoRetangulo dentro do for na função desenhaBarra, não fiz um somatório da altura com o y que nem a resolução fez. Quebrei um pouco a cabeça aqui e fiz de uma outra forma, mudando apenas a altura da barra, sem fazer a variável somaAltura. Acham valido minha solução? (Cheguei no mesmo resultado)
<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, serie2015, cores, texto) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
desenhaTexto(x,y-10, texto);
for( var contador = 0; contador < cores.length ; contador ++){
desenhaRetangulo(x, y, 50, 100, cores[contador])
contador++
if (contador > 0 && contador < 2) {
desenhaRetangulo(x, y, 50, (100 - (serie2015[contador - 1])), cores[contador])
contador++
}
if (contador > 1 && contador < 3) {
desenhaRetangulo(x, y, 50, 100 - (serie2015[contador - 2] + serie2015[contador - 1]), cores[contador])
contador++
}
if (contador > 2 && contador < 4) {
desenhaRetangulo(x, y, 50, 100 - (serie2015[contador - 3] + serie2015[contador - 2] + serie2015[contador - 1]), cores[contador])
contador++
}
}
}
var serie2015 = [50, 25, 20, 5];
var cores = ['blue', 'green', 'yellow', 'red'];
var serie2016 = [65, 20, 13, 2];
desenhaBarra(50,50, serie2015, cores, '2015' );
desenhaBarra(150,50, serie2016, cores, '2016' );
</script>