Explicando exercício do gráfico de barras!!!

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

    }

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

        desenhaTexto(x, y - 10, texto); //colocar o texto acima dos gráficos;

        var somaAltura = 0; // variável hipotética;

        //var i = 0 repetiçoes do array 

        for(var i = 0; i < serie.length; i++) {     // lenght != length; ATENÇÃO!

            var altura = serie[i]; //criando variável das alturas do array dos retangulos;
            desenhaRetangulo(x, + y + somaAltura, 50 /*largura do rentângulo*/, altura, cores[i]);
            somaAltura = somaAltura + altura  // para ir somando as alturas de um triangulo no outro

        }    

    }

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

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

</script>