Javascript - рисование некоторых изображений на холсте в цикле, используя drawimage и arc
Я новичок в JS, и я пытаюсь отображать некоторые дугообразные изображения в некоторых случайных координатах, но при выполнении кода ниже я могу отображать только первое изображение в формате дуги, остальные не отображаются. Я уже проверил, что цикл прокручивается, однако изображения не появляются.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
Promise.all(imgs.map(function(image) {
return new Promise(function(resolve, reject) {
image.onload = resolve;
});
}))
.then(function() {
for (var i = 0; i < Object.size(coordx); i++)
{
//console.log(i);
var X = coordx[i];
var Y = coordy[i];
var R = 25;
ctx.save();
ctx.beginPath();
ctx.arc(X, Y, R, 0, Math.PI*2,true);
ctx.strokeStyle = "#FFFFFF";
ctx.stroke();
ctx.clip();
ctx.drawImage(imgs[i], X-R, Y-R, R*2, R*2);
};
});
Когда я запускаю приложение, я не вижу ошибок, только другие изображения за пределами первого действительно не появляются.