Подскажите пожалуйста, canvas отдает прозрачные скриншоты, что нужно сделать чтобы были в цвете?
Мне нужно сделать 10 фотографий с разных видео в разное время. Canvas их отдает, все они одинаковые и прозрачного цвета.
private _startDraw(matchingLayers: object[], canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): Promise<string[]> {
return new Promise((resolve) => {
const drewThumbnails = [];
let i = 0;
const maxCount = matchingLayers.length - 1;
const time = matchingLayers[i].time;
const draw = async () => {
if (i <= maxCount) {
matchingLayers[i].layers.every((layer, index) => {
if (index < matchingLayers[i].layers.length) {
layer.video.ontimeupdate = () => {
ctx.drawImage(layer.video, layer.x, layer.y, layer.width, layer.height);
};
i++;
layer.video.currentTime = time;
return true;
} else {
return false;
}
});
const thumbnail = await canvas.toDataURL('image/jpg');
drewThumbnails.push(thumbnail);
draw();
} else {
resolve(drewThumbnails);
}
};
draw();
});
}
Как сделать чтобы он успевал отрисовать и все было в цвете? это асинхронная операция как я понял, но я не понимаю что я делаю не так.
Пример массива matchingLayers: 