Um loop está interferindo no outro. Por que?

Tenho dois loops para desenhar o gráfico de barras mas ao meu ver, o 2º loop está considerando o valor final da variável "y" no 1º loop, quando ocorreto seria iniciar a variável "y" =20. O que estou errando?

<canvas id="qqNome" width="600" height="500"></canvas>

<script>

    /*
        Em 2015: 50% Chrome, 25% Firefox, 20% Safari, 5% Outros (Opera, IE, etc).
        Em 2016: 65% Chrome, 20% Firefox, 13% Safari, 2% Outros (Opera, IE, Edge, etc).
    */

    function desenhaTexto(x,y,texto){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    function desenhaRetangulos(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);
    }

    var serie15 = [50*2,25*2,20*2,5*2];
    var serie16 = [65*2,20*2,13*2,2*2];
    var cores = ['blue','green','yellow','red'];

    var x = 0;
    var y = 20;

    for(var i = 0; i <= 3; i++){
        desenhaRetangulos(x,y,75,serie15[i],cores[i]);    
        y = y + serie15[i];    
    }

    for(var i = 0; i <= 3; i++){
        desenhaRetangulos(x + 125,y,75,serie16[i],cores[i]);    
        y = y + serie16[i];
    }

    desenhaTexto(20,15,'2015');

    desenhaTexto(145,15,'2016');