Gráfico ficou invertido

Olá!

Minhas barras ficaram invertidas e com tamanhos diferentes.

<meta charset="UTF-8">

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

<script>

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

    function desenhaRetangulo(x,y,largura,altura, cor, ano) {

        pincel.fillStyle = cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x,y,largura,altura);

    }

    function escreveTexto(x,y,ano) {

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

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

        escreveTexto(x, y - 10, ano);

        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            desenhaRetangulo(x,y + somaAltura, 50, altura, cores[i]);
            altura = somaAltura + altura;
        }
    }

    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];

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

    desenhaBarra(20, 70, serie2015, cores, '2015');
    desenhaBarra(90, 70, serie2016, cores, '2016');
</script>