Gráfico de Barras

Wow definitivamente necesito mas de estos ejercicios para practicar porque me rompí la cabeza tratando de implementar la función de dibujarBarra por mi mismo y estuve muy cerca del código del ciclo for pero tuve que recurrir al opinión del instructor solamente, todavia me cuesta identificar los casos en los que hay que declrar variables para ayudar a que el ciclo funcione como sumaAltura. Ahora me siento más tonto. ¿Alguien conoce alguna otra pagina recomendada donde haya ejercicios cortos de este estilo para practicar?

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function escribirTexto(x , y, texto, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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

    function dibujarBarra(x, y, serie, colores, texto) {

            escribirTexto(x, y - 10, texto, color="black");

            var sumaAltura = 0; //variable auxiliar

            for (var i = 0; i < serie.length; i++) {
                var altura = serie[i];
                dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
                sumaAltura = sumaAltura + altura;
                }
            }
    var colores = ["blue","green","yellow", "red","gray"];            
    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];

    dibujarRectangulo(0, 0, 450, 400, "orange")
    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
    escribirTexto(5, 170, "Chrome", "blue")
    escribirTexto(60, 170, "Firefox", "green")
    escribirTexto(120, 170, "Internet Explorer/Edge", "yellow")
    escribirTexto(290, 170, "Safari", "red")
    escribirTexto(350, 170, "Otros", "gray")
</script>

Ah! y por si alguien se lo preguntaba, acá está el codigo sin la utilizacion del ciclo for:

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

<script>
    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function escribirTexto(x , y, texto, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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

    dibujarRectangulo(50, 50, 50, 6, "blue");
    dibujarRectangulo(50, 56, 50, 47, "green");
    dibujarRectangulo(50, 103, 50, 41, "yellow");
    dibujarRectangulo(50, 144, 50, 3, "red");
    dibujarRectangulo(50, 147, 50, 3, "gray");

    dibujarRectangulo(150, 50, 50, 81, "blue");
    dibujarRectangulo(150, 131, 50, 9, "green");
    dibujarRectangulo(150, 140, 50, 3, "yellow");
    dibujarRectangulo(150, 143, 50, 3, "red");
    dibujarRectangulo(150, 146, 50, 4, "gray");

    escribirTexto(50, 40, "2009", "black")
    escribirTexto(150, 40, "2019", "black")
    escribirTexto(5, 170, "Chrome", "blue")
    escribirTexto(60, 170, "Firefox", "green")
    escribirTexto(120, 170, "Internet Explorer/Edge", "yellow")
    escribirTexto(290, 170, "Safari", "red")
    escribirTexto(350, 170, "Otros", "gray")

</script>