Как добавить бесконечное количество изображений на холст html5?

Я хочу, чтобы пользователь перетащил столько изображений, сколько пожелает, на холст html5. Из учебников онлайн я собираю что-то вроде:

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),

    imgs = arr.map(function callback(currentValue, index, array) {
        img = img = document.createElement("img");
    }[, thisArg])
    mouseDown = false,
    brushColor = "rgb(0, 0, 0)",
    hasText = true,
    clearCanvas = function () {
        if (hasText) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            hasText = false;
        }
    };

for (var i=0;i<imgs.length;i++){
    imgs[i].addEventListener("load",function(){
        context.drawImage(img,0,0);
    })
}

Я знаю, что строка 4 полностью неправильная..., но обычно люди, похоже, создают свои изображения в качестве переменных, а затем меняют источник с помощью перетаскиваемого изображения. Поскольку мне нужно столько изображений, сколько пользователь хочет добавить, это будет массив без какого-либо размера?

Кроме того, поскольку этот код вызывается один раз, при загрузке страницы, этот массив не может быть добавлен позже (например, когда пользователь решает добавить другое изображение). Так может быть, вся эта парадигма в этом случае неверна?

Может ли кто-нибудь посоветовать мне, как это сделать? Спасибо!

РЕДАКТИРОВАТЬ:

предложенное решение:

imgs_arr = [];
var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    imgs = imgs_arr.map(function callback(src) {
        var img = document.createElement("img");
        img.src = src;
        return img;
    });
    mouseDown = false,
    brushColor = "rgb(0, 0, 0)",
    hasText = true,
    clearCanvas = function () {
        if (hasText) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            hasText = false;
        }
    };

// Adding instructions
context.fillText("Drop an image onto the canvas", 240, 200);
context.fillText("Click a spot to set as brush color", 240, 220);

function drawImage(element,index,array){
    element.addEventListener("load",function(){
        clearCanvas()
        context.drawImage(element,0,0)
    })
}
imgs_arr.forEach(drawImage);

В настоящее время выбрасывает: Cannot read property 'appendChild' of null(anonymous function) потому что мой imgs_arr пуст - пока никто не добавил изображения.