迷宫生成完成后，将图像加载到HTML Canvas中

如何解决迷宫生成完成后，将图像加载到HTML Canvas中

我正在使用Canvas创建一个迷宫应用程序，并让令牌从头到尾遍历迷宫。

我完成了迷宫的生成，正在尝试在网格（0,0）上生成令牌。我已经创建了一个用于选择令牌的按钮，并在最后抛出调试器，这确实表明该图标是在正确的位置创建的，但是在我继续操作后该图标不会持久存在。我尝试将image.onload添加到drawImage函数中，但是仍然无法正常工作。

这是我最初在调试器中在Canvas上渲染图像的原因

function selectIcon(){
    let body = document.querySelector("body")
    let image = document.createElement("img")
    image.src = "image.jpg"
    body.prepend(image)
    // debugger
}

function clickHandler(){
    document.addEventListener("click",(e) => {
        button = e.target
        console.log(button)
        if(button.matches(".choose-token")){
            renderIconToCanvas()
        }
    })
}

function renderIconToCanvas(){
    const myCanvas = document.querySelector("canvas")
    myCanvas.setAttribute("id","maze-canvas")

    const image = new Image;
    image.src = "maze/image.jpg"
    
    let ctx = myCanvas.getContext("2d");
    ctx.drawImage(image,0);
}

我读过的所有解决方案都说将image.onload添加到drawImage中，但是当我将其放入时，我的图像不再在调试器中呈现。

function renderIconToCanvas(){
    const myCanvas = document.querySelector("canvas")
    myCanvas.setAttribute("id","maze-canvas")

    const image = new Image;
    image.src = "maze/image.jpg"
    
    image.onload = function (){
        let ctx = myCanvas.getContext("2d");
        ctx.drawImage(image,0);
    }
}

还有其他我可能会想念的东西吗？我尝试过的另一种方法：

let canvas = document.querySelector("canvas")
    let ctx = canvas.getContext("2d");
    const image = new Image(20,20);
    image.src = "./image.jpg"
    
    function draw(ctx,image){
        if (!image.complete){
            setTimeout(function(){
                draw(ctx,image);
            },50);
            return
        }
        ctx.drawImage(image,this.width,this.height);
    }
    draw(ctx,image)