[Duda] Gráfico de Barras

Amigos, aún tengo problemas con el recorrer los arrays, un poco con la iteraciones. Mi duda es la siguiente:

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

<script >
    var pantalla = document.querySelector("canvas")
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle= "lightgrey"
    pincel.fillRect(0,0,600,400);

    function dibujarRectangulo(x,y,base,altura,color){
        pincel.fillStyle= color;
        pincel.fillRect(x,y,base,altura,color);
        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,color,texto){
        escribirTexto(x,y -10, texto);

        var sumarAltura=0;
        for (var i =0; i < **1.** serie.length; i++) {
            var altura = serie[i];
            dibujarRectangulo(x,y + sumarAltura, 50, altura, **2.** colores[i])
            sumarAltura = sumarAltura + altura
        }

    }

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

Nota: seleccioné los puntos que no entiendo(*1. 2. *)

1. No entiendo como funciona serie.length para que pueda recorrer en este caso las dos series (2009/ 2019), por qué las recorre las dos al tiempo?
2. Me pueden explicar como es que recorre los colores?. Lo que entiendo es que según vaya recorriendo la (serie[i] ) va ir recorriendo (colores[i]) con tan solo ponerle la ([i].)