Como ficou minha solução

Nesse exercício eu senti uma real dificuldade de entender a lógica no começo, mas pensei comigo "eu não preciso me apressar, eu preciso aprender". Fiquei matutando e tentando diferentes formas de implementar o código e finalmente consegui chegar numa solução.

Sei que ele pode ficar muito mais simplificado, mas a sensação de ter conseguido resolvê-lo só queimando a massa cinzenta é inexplicável!

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

<script>

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


    function desenhaBarra(x, y, serie, cores, texto){

        var y = y + y;
        var serie = serie;
        pincel.fillStyle = cores[0];
        pincel.fillRect(x, y, 50, serie[0]);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, serie[0]);

        var serie = serie;
        pincel.fillStyle = cores[1];
        pincel.fillRect(x, y + serie[0], 50, serie[1]);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y + serie[0], 50, serie[1]);

        var serie = serie;
        pincel.fillStyle = cores[2];
        pincel.fillRect(x, y + serie[0] + serie[1], 50, serie[2]);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y + serie[0] + serie[1], 50, serie[2]);

        var serie = serie;
        pincel.fillStyle = cores[3];
        pincel.fillRect(x, y + serie[0] + serie[1] + serie[2], 50, serie[3]);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y + serie[0] + serie[1] + serie[2], 50, serie[3]);

        var desenhaTexto = texto 
        pincel.Font = "14px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(desenhaTexto, x, y - 10);
    }

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

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

</script>