Cant access to global variable Javascript

Question

Я пытаюсь прочитать массив пикселей с картинки канваса. Каждую картинку я кидаю в глобальный массив ImgArray. Я не могу вызвать ImgArray[2] из кода, но могу в консоле. Вот код

   const   examples = 10,
        size = 30;
        c = document.getElementById("mainCanvas"),
        ctx = c.getContext("2d");

var imgArray = [];
var iter = 0;


function processImages(i) {
    var img = new Image();
    img.src = "img/" + i + ".jpg";
    img.onload = function () {
        ctx.drawImage(img, 0,i*30, size, size);
        var imgData = ctx.getImageData(0,i*30,size,size);
        pushImg(imgData, i);
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    function pushImg(imgData, i ) {
        imgArray[i] = imgData;
    }
}

createPromise(0)

function createPromise(iter) {
    console.log(iter);
    if (iter <= (examples - 1)) {
        new Promise(function (resolve) {
            processImages(iter)
            resolve(0);
        }).then(function (value) {
            iter++;
            createPromise(iter) 
        });
    } else {
        output();
    }
}


function output() {
    console.log(imgArray[2])
}

Массив выглядит в консоле:

Когда я пытаюсь выводить imgArray[2] Он возвращает мне undefiend Я использую промисы для вызова console.log(imgArray[2]) после чтения, так что этот массив выводится после его изменения