Não troca a cor nem escreve o texto

Pessoal, bom dia.

Sobre o exercício de desenhar as barras de 2015 e 2016, tentei fazer de uma forma que ele só chamasse numa função os arrays series2015, series2016 e cores e, em um "for", já fizesse tudo.

PORÉMM, não está alterando a cor e nem escrevendo 2015 embaixo de uma das barras e 2016 embaixo da outra barra. ...Pq?

(ainda não tentei implementar as legendas das cores pq não sei nem onde está errado as outras legendas)

Obrigado,

AH, acabei de ver o gabarito, vi a diferença em relação à chamada das cores, mas pq do meu jeito não funciona?

Segue o código:

Mostrar dois gráfico. Um de 2015 e outro de 2016.
<br><br>

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>

/*Dados:
Gráficos:
2015: 50% Chrome, 25% Firefox, 20% Safari, 5% Outros (Opera, IE, etc).
2016: 65% Chrome, 20% Firefox, 13% Safari, 2% Outros (Opera, IE, Edge, etc).

Cores:
Chrome: azul
Firefox: verde
Safari: amarelo
Outros: vermelho
*/

function desenhaBarrasELegendasDosAnos(x0, y0, porcentagens1, porcentagens2, cores) {

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.strokeStyle = 'black';
    var proporcaoAcum = 0; 

    for (var i = 0; i < 4; i++) { //pega a cor e a porcentagem de cada posição dos arrays

        pincel.fillStyle = cores[i]; //recebe a cor referente a posição do array
        var proporcao = porcentagens1[i]; //o quanto vai descer
        pincel.fillRect(x0, y0 + proporcaoAcum, 50, proporcao);
        proporcaoAcum = proporcaoAcum + proporcao; //o 'y' --> onde vai começar a desenhar a próxima proporção

    } //for

    var texto = '2015';
    escreveLegenda(texto, x0, proporcaoAcum+30);

    proporcaoAcum = 0;
    x0 = x0 + 100; //desloca 100 pra desenhar a outra barra

    for (var i = 0; i < 4; i++) {

        pincel.fillStyle = cores[i];
        var proporcao = porcentagens2[i]; //o quanto vai descer
        pincel.fillRect(x0, y0 + proporcaoAcum, 50, proporcao);
        proporcaoAcum = proporcaoAcum + proporcao; //o 'y' --> onde vai começar a desenhar a proporção

    } //for

    texto = '2016';
    escreveLegenda(texto, x0, proporcaoAcum+30);

} //função

function escreveLegenda(texto, x, y) {

    pincel.font='10px Georgia';
    pincel.fillStyle='black';
    pincel.fillText(texto, x, y);  

} // função

    var series2015 = [50, 25, 20, 5];
    var series2016 = [65, 20, 13, 2];
    var cores = ['azul', 'verde', 'amarelo', 'vermelho'];

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    x0 = 50; //não começar a desenhar no canto
    y0 = 50; //não começar a desenhar no canto

    desenhaBarrasELegendasDosAnos(x0, y0, series2015, series2016, cores);

</script>