Fabricjs: лист спрайтов для горизонтальной непрерывной миниатюры видео на холсте

У меня есть несколько листов спрайтов, по одному на каждую минуту видео. Например, если видео длится 3 минуты, у меня есть sprite.0.jpg, sprite.1.jpg, sprite.2.jpg, что означает 3 листа спрайтов, каждый из которых имеет 60 изображений за 1 секунду.

Это означает, что лист спрайтов с 10 столбцами и 6 строками имеет размер одного изображения 142x80, тогда как общий лист спрайтов имеет размер 1420x480 (см. ниже).

Я хочу создать компонент для предварительного просмотра непрерывной миниатюры видео на холсте. (см. ниже)

Как преобразовать листы Sprite в горизонтальную непрерывную миниатюру видео на холсте Fabricjs?

Я попытался нарисовать первый кадр листа спрайтов на холсте, но не уверен, как разместить все листы спрайтов непрерывно, чтобы холст можно было прокручивать по горизонтали.

// Get the canvas and canvas context
var canvas = document.getElementById("timeline");
var ctx = canvas.getContext("2d");

// Create an image object
var image = new Image();
image.src = "path/to/spritesheet.jpg";

// Wait for the image to load
image.onload = function() {
    // Set the canvas size
    canvas.width = 1420;
    canvas.height = 480;

    // Draw the first frame of the sprite sheet
    ctx.drawImage(image, 0, 0, 1420, 480, 0, 0, canvas.width, canvas.height);
};