图片未加载转换后的画布的所有部分

Question

我有一个调用以下功能的按钮。它在无显示的画布上绘制图像，我将其转换为图像，并将dom的src中的空白图像设置为转换后的图像src。

function book2png()
{
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.height = Math.floor((slot_map.size / 6 + 1)) * 125;
const cardsData = document.querySelector(".editBookArea").childNodes;
var canY = 0;
var canX = 0;

for(let i = 0; i < cardsData.length; i++)
{
    var number = slot_map.get(cardsData[i].id)[0].toString();
    var img = new Image();
    img.src = slot_map.get(cardsData[i].id)[1];
    ctx.drawImage(img,canX,canY);
    if(number > 1)
    {
        ctx.strokeStyle='black';
        ctx.fillStyle='white';
        ctx.font = "40px Arial";
        ctx.lineWidth = "5";
        ctx.strokeText(number.toString(), (canX + 75), (canY + 120)); 
        ctx.fillText(number.toString(), (canX + 75), (canY + 120)); 
    }
    canX = (canX + 100) % 600;
    if(canX == 0 && i != 0)
    {
        canY += 125;
    }
}
var image = new Image();
image.src = canvas.toDataURL("image/png");
var imageArea = document.getElementById('bookImage');
image.onload = function(){imageArea.src = image.src;};

}

但是，当我在“ slot_map”中添加另一个元素时，请创建一个新标签，然后迅速返回页面并再次按下按钮，图像的某些部分将不会显示。我的实施方式有问题吗？也许是因为用于创建最终图像的图像位于单独的目录中？不同颜色的项目位于不同的目录中。

下方：第一张图片是示例列表，下方是正确图片，下方是错误图片。链接到我制作的Web应用程序。 https://aaronchoi5.github.io/#