Código usando "while" ao invés de "for"

Nossa...apanhei pra caramba pra fazer este código. Acho que ainda não estou totalmente confortável para encontrar o posicionamento correto de cada variável dentro do código (falo sobre a ordem das variáveis ou se elas devem esta localizadas dentro ou fora de cada função). Mas depois de muita bateção de cabeça, dá pra dizer que aprendi um bocado nesta brincadeira...rsrsr.

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

<script>

var tela=document.querySelector("canvas");
var pincel=tela.getContext("2d");
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];

function addLegenda(legenda,x,y){
pincel.font="20px serif";
pincel.fillStyle="black"
pincel.fillText(legenda,x,y);
}


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

addLegenda(legenda,x+5,y-10,);

var i=0
var alturaTotal=0
while(i<serie.length) {
var altura=serie[i];
pincel.fillStyle = cores[i];
pincel.fillRect(x,y + alturaTotal,50,altura);
alturaTotal = alturaTotal + altura;
i++;
}}


desenhaBarra(50,50,serie2015, cores, 2015);

desenhaBarra(150,50,serie2016,cores, "2016");


</script>