Exercício: Gráfico de barras - Lógica de programação II

Alguém poderia me ajudar? quero saber como posso colocar uma única barra de gráfico utilizando o "for" conforme abaixo, pois não consegui colocar a barra do gráfico dentro do for como eu gostaria.

<meta charset="UTF-8">

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

<script>


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

    pincel.fillStyle="lightgrey";
    pincel.fillRect(0, 0, 600, 400); // x , y , width , height



function desenhaTexto(x, y, texto) {


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

 function desenhaBarra(x, y, serie, cores, texto) {
    pincel.fillStyle = cores;
    pincel.fillRect(x, y, 50, serie); // x , y , width , height
    pincel.strokeRect(x, y, 50, serie);
    desenhaTexto(x+53,y+8,texto);
}

var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
var texto = ['Chrome','Firefox','Safari','Outros'];
var x = 50;
var y = 300;

for (i =0; i<=3; i++) {
    if (i==0){
        desenhaBarra(x,y,serie2015[i],cores[i],texto[i]);
    }
        else{
        desenhaBarra(x,y+x+serie2015[i],serie2015[i],cores[i],texto[i]);

    }

}


</script>

Esse exercício é o Gráfico de barras - Lógica de programação II.