Não consegui fazer sozinho

Esse desafiou embaralhou minha cabeça, não consegui fazer sozinho, consegui fazer apenas seguindo a resposta do professor. Eu consegui entender o que ele fez, mas somar as alturas eu não tinha pensado nisso. Para ficar diferente eu usei um While no lugar do for, mas acredito que o for seja melhor para utilizar com arrays já que precisa nomear uma variavel para acessar os itens dentro do array.

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

<script>

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


pincel.fillStyle = 'white'
pincel.fillRect(0,0,600,400)


function desenhaRetangulo(x,y,largura,altura,cores){
    pincel.fillStyle = cores;
    pincel.fillRect(x,y,largura,altura);
    pincel.strokeStyle = "orange";
    pincel.strokeRect(x,y,largura,altura);
}


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);    
    }


var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];


function desenhaBarra(x,y,serie,cores,texto) {
    desenhaTexto(x,y - 10,texto);

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

    }
}

desenhaBarra(80,50,serie2015,cores,'2015')
desenhaBarra(300,50,serie2016,cores,'2016')
desenhaTexto(20, 60, 'chrome');
desenhaTexto(20, 118, 'firefox');
desenhaTexto(20, 138, 'safari');
desenhaTexto(20, 155, 'outros')


desenhaTexto(240, 60, 'chrome');
desenhaTexto(240, 122, 'firefox');
desenhaTexto(240, 141, 'safari');
desenhaTexto(240, 160, 'outros')


</script>