Canvas多尺寸重复背景图片下载功能冲突问题求助

大家好，我正在做一个功能：通过Canvas实现图片背景重复，然后下载两种不同尺寸的图片版本。单独测试单个下载选项时一切正常，但同时添加两个版本后就失效了——尽管我用了唯一的标识符来区分它们。有没有朋友能帮我排查下问题？以下是我的JavaScript代码和相关说明：

相关说明 #

• Canvas和下载按钮都放在一个可切换显示的div中（通过display:block/none控制），单独测试第一个功能时没问题，但添加第二个版本后就失效了
• body标签使用了onload="loadMe1();loadMe2();"，因为这些元素一开始被div隐藏了
• JavaScript代码写在HTML5的body标签内部

代码实现 #

function loadMe1() {
    const canvas1 = document.getElementById('largePicPreview1');
    const ctx1 = canvas1.getContext('2d');
    const img1 = document.getElementById('lamp');
    const pat1 = ctx1.createPattern(img1, 'repeat');
    ctx1.rect(0, 0, 50, 50);
    ctx1.fillStyle = pat1;
    ctx1.fill();
    return canvas1;
}
function convertCanvasToImage1(canvas1) {
    var image1 = new Image();
    image1.src = canvas1.toDataURL('image/png');
    return image1;
}
// a button uses "onclick="dwn1()"
function dwn1() {
    var image1 = convertCanvasToImage1(document.getElementById('largePicPreview1'));
    var anchor1 = document.createElement('a1');
    console.log(anchor1);
    anchor1.setAttribute('href', image1.src);
    anchor1.setAttribute('download', 'image1.png');
    anchor1.click();
}
function loadMe2() {
    const canvas2 = document.getElementById('largePicPreview2');
    const ctx2 = canvas2.getContext('2d');
    const img2 = document.getElementById('lamp');
    const pat2 = ctx2.createPattern(img2, 'repeat');
    ctx2.rect(0, 0, 150, 150);
    ctx2.fillStyle = pat2;
    ctx2.fill();
    return canvas2;
}
function convertCanvasToImage2(canvas2) {
    var image2 = new Image();
    image2.src = canvas2.toDataURL('image/png');
    return image2;
}
// a button uses "onclick="dwn2()"
function dwn2() {
    var image2 = convertCanvasToImage2(document.getElementById('largePicPreview2'));
    var anchor2 = document.createElement('a2');
    console.log(anchor2);
    anchor2.setAttribute('href', image2.src);
    anchor2.setAttribute('download', 'image2.png');
    anchor2.click();
}

备注：内容来源于stack exchange，提问作者A Jones