cuca completamente fundida

esse deu uma tostada braba nos neurônios! fiquei um tempo encalhado num erro besta dentro da função desenhaBarra que estava fazendo meus retângulos se sobreporem.. ao invés de incrementar em y o valor da altura da barra anterior eu incrementei em x, mas depois de uma árdua jornada caçando o deslize, triunfei sem colar! kkkk multipliquei todos os valores dos % por 2 pra ficar um gráfico maiorzinho e caber as letrinhas da "legenda", que deixei ao lado das barras e incorporei a criação dentro da desenhaBarra mesmo

<meta charset="UTF-8">

<canvas width='600' height='1100'></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);
    }

    function desenhaTexto(x, y, cor, texto){

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

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

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

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

        for(var contador = 0; contador < textos.length; contador++){

            desenhaRetangulo(x, y, 50, serie[contador], cor[contador]);
            desenhaTexto(x+55, y+(serie[contador]/2), cor[contador], texto[contador]);
            y += serie[contador];
        }
    }

    var serie2015 = [100, 50, 40, 10];

    var serie2016 = [130, 40, 26, 4];

    var cores = ['navy', 'darkgreen', 'orange', 'red'];

    var textos = ['Chrome', 'Firefox', 'Safari', 'Outros'];

    desenhaTexto(50, 25, 'black', 'Navegadores que as pessoas alunas usam (%)')
    desenhaBarra(50, 50, serie2015, cores, textos);
    desenhaTexto(50, 280, 'black', '2015');
    desenhaBarra(250, 50, serie2016, cores, textos);
    desenhaTexto(250, 280, 'black', '2016');

</script>