[Duda] Duda en ejercicio de grafico de barras...

Buenas a toda la comunidad, haciendo el ejerecicio de el grafico de barras me surgio una duda en cuanto el uso de la funcion "escribirTexto"

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

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


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

    function escribirTexto(x , y, texto) {

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


    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];
    function dibujarBarra(x, y, serie, colores, texto) {

        for(let posicion=0;posicion<= serie.length; posicion++){
            dibujarRectangulo(x,y,50,serie[posicion],colores[posicion])
            y=y+serie[posicion]

        }
        escribirTexto(x,y-10,texto);

    }
    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");

</script>

Esta erá mi propuesta inicial, pero lo que no entiendo es por que al poner la funcion "escribirTexto" despues del loop "for" de la funcion de "dibujarBarra" la funcion no entra y no me escribe ningun texto, mi duda es que si el For al parecer al terminar tambien sirve como un break a la funcion "dibujarBarra"? ya que al escribir mi texto así:

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

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


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

    function escribirTexto(x , y, texto) {

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


    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];
    function dibujarBarra(x, y, serie, colores, texto) {

        escribirTexto(x,y-10,texto);

        for(let posicion=0;posicion<= serie.length; posicion++){
            dibujarRectangulo(x,y,50,serie[posicion],colores[posicion])
            y=y+serie[posicion]

        }

    }
    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");

</script>

El texto de los años SI se escribia, vean que el unico cambio entre ambos codigos es la posicion de el llamado a la funcion "escribirTexto" , si gusta pueden copiar los dos codigos para ver a lo que me refiero. De ante mano gracias y saludos cordiales