Código não roda as listas

Ola, pessoal! Nao consegui fazer o exercício por conta, entao copiei o código do instrutor e fui acompanhando o passo a passo da explicação. Achei que tinha entendido, mas algo deve ter passado batido porque as listas de serie e cores não rodam a partir do meu for. O que aparece na tela são dois retângulos pretos com os nomes dos anos em cima, ou seja, sem a altura dividida em quatro retangulos, a partir da porcentagem de cada um e sem diferença de cores. Alguém pode me ajudar?

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

<script>


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

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 escreveTexto(texto, x, y)  {

    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)  {

    escreveTexto(texto, x, y - 10); 
    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;

    } 


}    




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



</script>