Estoy desarrollando un programa con canvas HTML5 Y JavaScript donde en una clase defino un componente gráfico y en otra clase dibujo haciendo llamados a ese componente. Hasta aquí todo bien, solo que ahora me han pedido que separe el dibujo en dos funciones, en una de ellas llene los arreglos con los elementos gráficos y en la otra recorra el arreglo y los pinte. El detalle es que en la primer función lleno un arreglo bidimensional y no sé como pasárselo a otra función como parámetro (soy novato en JavaScript).

Si alguien pudiera ayudarme se lo agradecería.

Básicamente tengo una clase GraphicComponent a la cual le paso los parametros (x,y,width,heigth y algunos textos) y es a la que hago llamados.

    //arreglo que contendrá todas los elementos
    var parrilla = new Array(4);
    
    //arreglos que alojaran los elementos gráficos de los trimestres
    var lote1  = new Array(13);
    var lote2  = new Array(13);
    var lote3  = new Array(13);
    var lote4  = new Array(13);

    this.almacen = function(ctx)
    {
        for (var i = 0; i < lote4.length; i++)
        {
            trimLote4[i]=new GraphicComponent(xLote4, yLote4+(separacion)*(i+1), width, height, textLote4[i], clavesLote4[i], creditosLote4[i]);
        }
        ....

        for (var i = 0; i < lote1.length; i++)
        {
            ...
        }

        parrilla[0] = lote1;
        parrilla[1] = lote2;
        parrilla[2] = lote3;
        parrilla[3] = lote4;
    };

    this.pinta = function(gridUEAs)
    {
        for(var i=0; i < gridUEAs.length;i++)
        {
            for(var j=0;j<gridUEAs[i].length;j++)
            {
                gridUEAs[i][j].draw(ctx);
            }
        }
    };