Подскажите пожалуйста, 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: Пример массива matchingLayers


Ответы (0 шт):