动态添加<img/>元素到画布

Question

我正在尝试做出反应应用。我有一个div元素，其中包含一堆动态添加的图像。单击按钮后，我想将每个图像添加到画布。我在将它添加到画布时遇到了麻烦，因为它一直给我一个错误，因为我没有在使用drawImage（）之前加载图像。我很困惑这是如何工作的，因为图像已经在DOM上了，但是我必须预先加载它或什么？

这就是我现在所拥有的，它并没有给我一个错误但却没有做我想要的，因为我正在尝试。起初我只是有一个for循环来获取每个的src，但这引发了一个错误，我虽然需要一个对象。所以我创建了一个对象文字，并将每个那里的src推送到画布，但它给出了同样的错误。我只是有一个Image构造函数来进行实验，但我不知道如何处理它。

captureImage(){
        let canvas = document.querySelector("#canvas")
        let ctx = canvas.getContext("2d")
        let imgDiv = document.querySelector(".images")
        let imgEl = document.getElementsByTagName("img")
        let imgObj = new Image
        imgObj.onload = function(){
            ctx.drawImage(imgObj.images[n],0,0)
        }
        if (imgEl){
            for (var n = 0;n < imgEl.length;n++){
                imgObj[n] = imgEl[n].src
                    console.log(imgObj.images)
            }
        }
    }

该函数名为onClick。我真的很困惑。我真的不知道放在哪里。