Mais simples, confira!

Olá pessoal! Fiz um código diferente do professor, acho que ficou mais simples e fácil de entender, então resolvi compartilhar pois pode acabar ajudando alguém a entender, já que este exercício é bem complexo! Criei uma variável a menos dentro da função e atribui o valor de y diretamente à minha variável que soma as alturas. Além disso, reparei que podemos definir as variáveis 'tela' e 'pincel' fora das funções, para evitarmos a repetição, sem alterar o funcionamento do programa, reparem que são definidas logo no começo. Segue o código:

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

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

    function desenhaQuadrado(x, y, l, a, cor){

      pincel.fillStyle = cor;
      pincel.fillStroke = "black";

      pincel.fillRect(x, y, l, a);
      pincel.strokeRect(x, y, l, a);
    }

    function desenhaTexto(texto, x , y) {

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

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

      var alturaTotal = y;

      desenhaTexto(texto, x, (y - 25));

      for (var i = 0; i < serie.length; i++){

          desenhaQuadrado(x, alturaTotal, 50, serie[i], cores[i]);

          alturaTotal = alturaTotal + serie[i];
      }
    }

    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>