No lo entendi

hola, en este codigo me perdi, ya hubo una parte donde ya no pude desarrollar mi codigo, ya comparando el ejecicio me faltaron basantes cosas agradceia si alguien me las pudiera explicar de nuevo dejo mis dudas comentado dentro del codigo.

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

<script>

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");    ** // estas dos variables siempre tienen que ir dentro de una funcion ? yo no las tengo asi y **         var pincel = pantalla.getContext("2d");                                         **aun el  codigo funciona** 

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

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

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

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

        escribirTexto(x, y - 20, texto);

        var sumaAltura = 0;
        for (var i = 0; i < serie.length; i++) {   **//porque usa "var i" y como es que llama el array ?**
            var altura = serie[i];
            dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);      **//porque el numero 50 ?**
            sumaAltura = sumaAltura + altura;
        }
    }

    var colores = ["blue","green","yellow", "red","gray"];
    var serie2009 = [6,47,41,3,3];
    var serie2019 = [81,9,3,3,4];

    dibujarBarra(50, 50, serie2009, colores, "2009");  **//entonces si el array se declara como variable el for como la aplica ?**
    dibujarBarra(150, 50, serie2019, colores, "2019");

</script>