Tenho tido muita dificuldade na montagem desse loop em específico, o máximo que consegui foi elaborar uma função estática. Alguém pode me explicar melhor a relação de repetição e os arrays? Porque na resposta so usa o termo "serie" e não "serie105" ou "serie2016"? Acho que ficaram algumas lacunas entre o último exercício e este.

O que consegui fazer:

<canvas height="1000" width="1000"> </canvas>

<script>

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

    var serie15 = [50, 25, 20, 5];
    var serie16 = [65, 20, 13, 2];

    var cores = ['blue', 'green', 'yellow', 'red'];

    function desenheRetangulo (x, y, larg, alt, cor){
        cx.fillStyle = cor;
        cx.fillRect(x, y, larg, alt);
        cx.strokeStyles = 'black';
        cx.strokeRect(x, y, larg, alt);
    }

    function desenhaTexto(x, y, texto){
        cx.font = "15px Georgia";
        cx.fillStyle = 'black';
        cx.fillText(texto, x, y);
    }


    function desenhaBarra2015(x, y, larg, alt, cor){

        desenheRetangulo(0, 0, 40, s15[0], cores[0]);

        desenheRetangulo(0, s15[0], 40, s15[1], cores[1]);

        desenheRetangulo(0, s15[0]+s15[1], 40,  s15[2], cores[2]);

        desenheRetangulo(0, s15[0]+s15[1]+s15[2], 40,  s15[3], cores[3]);
    }

    desenhaBarra2015();




</script>