如何在每个Canvas DrawImage的forEach循环内添加自定义位置？

我正在尝试使用Canvas DrawImages显示多个图像，每个图像都有一个唯一的位置。我创建了一个包含多个图像的数组，我想将它们放置在画布上的不同部分上。

现在，所有画布图像都相互堆叠。

这是我的JS：

(() => { // Canvas Setup let canvas = document.getElementById('hedoneCanvas'); let context = canvas.getContext('2d');

// // Canvas Images
let imageSources = [
    'https://images.pexels.com/photos/1313267/pexels-photo-1313267.jpeg?cs=srgb&dl=food-fruit-green-1313267.jpg&fm=jpg',
    'https://images.pexels.com/photos/2965413/pexels-photo-2965413.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2196602/pexels-photo-2196602.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2955490/pexels-photo-2955490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
];

// Canvas Size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const loadImage = imagePath => {
    return new Promise((resolve, reject) => {
        let image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.addEventListener('error', err => {
            reject(err);
        });
        image.src = imagePath;
    });
};

const canvasOnResize = () => {
    canvas.width = window.innerWidth;
    canvas.style.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.height = window.innerHeight;
};

window.addEventListener('resize', canvasOnResize);

Promise.all(imageSources.map(i => loadImage(i)))
    .then(images => {
        images.forEach(image => {
            console.log(context);
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
        });
    })
    .catch(err => {
        console.error(err);
    });

})(); 我也想让他们响应我该如何存档？

我在Codepen上有演示： https ://codepen.io/Merdzanovich/pen/dybLQqL