@babylonjs/lottie-player 9.2.1 → 9.3.0

package/parsing/spritePacker.js

@@ -4,14 +4,15 @@ import { GetInitialScalarValue, GetInitialVectorValues, GetInitialBezierData } f
 import { GetShapesBoundingBox, GetTextBoundingBox } from "../maths/boundingBox.js";
 /**
  * SpritePacker is a class that handles the packing of sprites into a texture atlas.
+ * If sprites exceed the capacity of a single atlas texture, additional atlas pages are created.
  */
 export class SpritePacker {
     /**
-     * Gets the texture atlas that contains all the sprites packed by this SpritePacker.
-     * @returns The texture atlas containing the sprites.
+     * Gets the textures for all atlas pages.
+     * @returns An array of textures, one per atlas page.
      */
-    get texture() {
-        return this._spritesTexture;
+    get textures() {
+        return this._pages.map((p) => p.texture);
     }
     /**
      * Sets the fonts that will be used to render text in the sprite atlas.
@@ -30,28 +31,11 @@ export class SpritePacker {
      */
     constructor(engine, isHtmlCanvas, atlasScale, variables, configuration) {
         this._engine = engine;
+        this._isHtmlCanvas = isHtmlCanvas;
         this._atlasScale = atlasScale;
         this._variables = variables;
         this._configuration = configuration;
-        this._isDirty = false;
-        this._currentX = this._configuration.gapSize;
-        this._currentY = this._configuration.gapSize;
-        this._maxRowHeight = 0;
-        if (isHtmlCanvas) {
-            this._spritesCanvas = document.createElement("canvas");
-            this._spritesCanvas.width = this._configuration.spriteAtlasWidth;
-            this._spritesCanvas.height = this._configuration.spriteAtlasHeight;
-            this._spritesCanvasContext = this._spritesCanvas.getContext("2d");
-        }
-        else {
-            this._spritesCanvas = new OffscreenCanvas(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight);
-            this._spritesCanvasContext = this._spritesCanvas.getContext("2d");
-        }
-        this._spritesInternalTexture = this._engine.createDynamicTexture(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight, false, 2); // Linear filtering
-        this._engine.updateDynamicTexture(this._spritesInternalTexture, this._spritesCanvas, false);
-        this._spritesTexture = new ThinTexture(this._spritesInternalTexture);
-        this._spritesTexture.wrapU = 0; // Disable wrapping
-        this._spritesTexture.wrapV = 0; // Disable wrapping
+        this._pages = [this._createPage()];
         this._spriteAtlasInfo = {
             uOffset: 0,
             vOffset: 0,
@@ -61,6 +45,7 @@ export class SpritePacker {
             heightPx: 0,
             centerX: 0,
             centerY: 0,
+            atlasIndex: 0,
         };
     }
     /**
@@ -75,28 +60,25 @@ export class SpritePacker {
         scalingFactor.y = scalingFactor.y * this._atlasScale * this._configuration.devicePixelRatio;
         // Calculate the size of the sprite in the atlas in pixels
         // This takes into account the scaling factor so in the call to _drawVectorShape the canvas will be scaled when rendering
-        this._spriteAtlasInfo.cellWidth = boundingBox.width * scalingFactor.x;
-        this._spriteAtlasInfo.cellHeight = boundingBox.height * scalingFactor.y;
-        // Check if the sprite fits in the current row
-        if (this._currentX + this._spriteAtlasInfo.cellWidth > this._configuration.spriteAtlasWidth) {
-            // Add a gap between sprites to avoid bleeding issues
-            this._currentX = this._configuration.gapSize;
-            this._currentY += this._maxRowHeight + this._configuration.gapSize;
-            this._maxRowHeight = 0;
-        }
+        this._spriteAtlasInfo.cellWidth = this._getAtlasCellDimension(boundingBox.width * scalingFactor.x);
+        this._spriteAtlasInfo.cellHeight = this._getAtlasCellDimension(boundingBox.height * scalingFactor.y);
+        // Get (or create) the page that has room for this sprite
+        const page = this._getPageWithRoom(this._spriteAtlasInfo.cellWidth, this._spriteAtlasInfo.cellHeight);
         // Draw the shape in the canvas
-        this._drawVectorShape(rawElements, boundingBox, scalingFactor);
-        this._isDirty = true;
+        this._drawVectorShape(rawElements, boundingBox, scalingFactor, page);
+        this._extrudeSpriteEdges(page, page.currentX, page.currentY, this._spriteAtlasInfo.cellWidth, this._spriteAtlasInfo.cellHeight);
+        page.isDirty = true;
         // Get the rest of the sprite information required to render the shape
-        this._spriteAtlasInfo.uOffset = this._currentX / this._configuration.spriteAtlasWidth;
-        this._spriteAtlasInfo.vOffset = this._currentY / this._configuration.spriteAtlasHeight;
+        this._spriteAtlasInfo.uOffset = page.currentX / this._configuration.spriteAtlasWidth;
+        this._spriteAtlasInfo.vOffset = page.currentY / this._configuration.spriteAtlasHeight;
         this._spriteAtlasInfo.widthPx = boundingBox.width;
         this._spriteAtlasInfo.heightPx = boundingBox.height;
         this._spriteAtlasInfo.centerX = boundingBox.offsetX;
         this._spriteAtlasInfo.centerY = boundingBox.offsetY;
+        this._spriteAtlasInfo.atlasIndex = this._pages.indexOf(page);
         // Advance the current position for the next sprite
-        this._currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
-        this._maxRowHeight = Math.max(this._maxRowHeight, this._spriteAtlasInfo.cellHeight);
+        page.currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
+        page.maxRowHeight = Math.max(page.maxRowHeight, this._spriteAtlasInfo.cellHeight);
         return this._spriteAtlasInfo;
     }
     /**
@@ -110,7 +92,7 @@ export class SpritePacker {
             return undefined;
         }
         // If the text information is malformed and we can't get the bounding box, then just return
-        const boundingBox = GetTextBoundingBox(this._spritesCanvasContext, textData, this._rawFonts, this._variables);
+        const boundingBox = GetTextBoundingBox(this._pages[this._pages.length - 1].context, textData, this._rawFonts, this._variables);
         if (boundingBox === undefined) {
             return undefined;
         }
@@ -118,106 +100,234 @@ export class SpritePacker {
         scalingFactor.y = scalingFactor.y * this._atlasScale * this._configuration.devicePixelRatio;
         // Calculate the size of the sprite in the atlas in pixels
         // This takes into account the scaling factor so in the call to _drawText the canvas will be scaled when rendering
-        this._spriteAtlasInfo.cellWidth = boundingBox.width * scalingFactor.x;
-        this._spriteAtlasInfo.cellHeight = boundingBox.height * scalingFactor.y;
-        // Find the position to draw the text
-        // If the text doesn't fit in the current row, move to the next row
-        if (this._currentX + this._spriteAtlasInfo.cellWidth > this._configuration.spriteAtlasWidth) {
-            // Add a gap between sprites to avoid bleeding issues
-            this._currentX = this._configuration.gapSize;
-            this._currentY += this._maxRowHeight + this._configuration.gapSize;
-            this._maxRowHeight = 0;
-        }
+        this._spriteAtlasInfo.cellWidth = this._getAtlasCellDimension(boundingBox.width * scalingFactor.x);
+        this._spriteAtlasInfo.cellHeight = this._getAtlasCellDimension(boundingBox.height * scalingFactor.y);
+        // Get (or create) the page that has room for this sprite
+        const page = this._getPageWithRoom(this._spriteAtlasInfo.cellWidth, this._spriteAtlasInfo.cellHeight);
         // Draw the text in the canvas
-        this._drawText(textData, boundingBox, scalingFactor);
-        this._isDirty = true;
+        this._drawText(textData, boundingBox, scalingFactor, page);
+        this._extrudeSpriteEdges(page, page.currentX, page.currentY, this._spriteAtlasInfo.cellWidth, this._spriteAtlasInfo.cellHeight);
+        page.isDirty = true;
         // Get the rest of the sprite information required to render the text
-        this._spriteAtlasInfo.uOffset = this._currentX / this._configuration.spriteAtlasWidth;
-        this._spriteAtlasInfo.vOffset = this._currentY / this._configuration.spriteAtlasHeight;
+        this._spriteAtlasInfo.uOffset = page.currentX / this._configuration.spriteAtlasWidth;
+        this._spriteAtlasInfo.vOffset = page.currentY / this._configuration.spriteAtlasHeight;
         this._spriteAtlasInfo.widthPx = boundingBox.width;
         this._spriteAtlasInfo.heightPx = boundingBox.height;
         this._spriteAtlasInfo.centerX = boundingBox.offsetX;
         this._spriteAtlasInfo.centerY = boundingBox.offsetY;
+        this._spriteAtlasInfo.atlasIndex = this._pages.indexOf(page);
         // Advance the current position for the next sprite
-        this._currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
-        this._maxRowHeight = Math.max(this._maxRowHeight, this._spriteAtlasInfo.cellHeight);
+        page.currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
+        page.maxRowHeight = Math.max(page.maxRowHeight, this._spriteAtlasInfo.cellHeight);
         return this._spriteAtlasInfo;
     }
     /**
-     * Updates the internal atlas texture with the information that has been added to the SpritePacker.
+     * Updates all dirty atlas page textures with the latest canvas content.
      */
     updateAtlasTexture() {
-        if (!this._isDirty) {
-            return; // No need to update if nothing has changed
+        for (const page of this._pages) {
+            if (!page.isDirty) {
+                continue;
+            }
+            this._engine.updateDynamicTexture(page.internalTexture, page.canvas, false);
+            page.isDirty = false;
         }
-        // Update the internal texture with the new canvas content
-        this._engine.updateDynamicTexture(this._spritesInternalTexture, this._spritesCanvas, false);
-        this._isDirty = false;
     }
     /**
-     * Releases the canvas and its context to allow garbage collection.
+     * Releases the canvases and their contexts to allow garbage collection.
      */
     releaseCanvas() {
-        this._spritesCanvasContext = undefined; // Clear the context to allow garbage collection
-        this._spritesCanvas = undefined; // Clear the canvas to allow garbage collection
+        for (const page of this._pages) {
+            page.context = undefined;
+            page.canvas = undefined;
+        }
+    }
+    _createPage() {
+        let canvas;
+        let context;
+        if (this._isHtmlCanvas) {
+            canvas = document.createElement("canvas");
+            canvas.width = this._configuration.spriteAtlasWidth;
+            canvas.height = this._configuration.spriteAtlasHeight;
+            context = canvas.getContext("2d");
+        }
+        else {
+            canvas = new OffscreenCanvas(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight);
+            context = canvas.getContext("2d");
+        }
+        const internalTexture = this._engine.createDynamicTexture(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight, false, 2);
+        this._engine.updateDynamicTexture(internalTexture, canvas, false);
+        const texture = new ThinTexture(internalTexture);
+        texture.wrapU = 0;
+        texture.wrapV = 0;
+        return {
+            canvas,
+            context,
+            internalTexture,
+            texture,
+            isDirty: false,
+            currentX: this._configuration.gapSize,
+            currentY: this._configuration.gapSize,
+            maxRowHeight: 0,
+        };
+    }
+    /**
+     * Returns a page with room for a sprite of the given size. Wraps to the next row if needed,
+     * and creates a new page if the current page is full.
+     * @param cellWidth The width of the sprite cell in pixels.
+     * @param cellHeight The height of the sprite cell in pixels.
+     * @returns An atlas page with enough room for the sprite.
+     */
+    _getPageWithRoom(cellWidth, cellHeight) {
+        let page = this._pages[this._pages.length - 1];
+        // Clamp oversized cells to fit within a single atlas page
+        const maxCellWidth = this._configuration.spriteAtlasWidth - 2 * this._configuration.gapSize;
+        const maxCellHeight = this._configuration.spriteAtlasHeight - 2 * this._configuration.gapSize;
+        if (cellWidth > maxCellWidth || cellHeight > maxCellHeight) {
+            // eslint-disable-next-line no-console
+            console.warn(`[SpritePacker] Sprite cell (${cellWidth}x${cellHeight}) exceeds atlas page (${this._configuration.spriteAtlasWidth}x${this._configuration.spriteAtlasHeight}). Clamping to fit.`);
+            this._spriteAtlasInfo.cellWidth = Math.min(cellWidth, maxCellWidth);
+            this._spriteAtlasInfo.cellHeight = Math.min(cellHeight, maxCellHeight);
+            cellWidth = this._spriteAtlasInfo.cellWidth;
+            cellHeight = this._spriteAtlasInfo.cellHeight;
+        }
+        // Check if the sprite fits in the current row
+        if (page.currentX + cellWidth > this._configuration.spriteAtlasWidth) {
+            // Move to the next row
+            page.currentX = this._configuration.gapSize;
+            page.currentY += page.maxRowHeight + this._configuration.gapSize;
+            page.maxRowHeight = 0;
+        }
+        // Check if the sprite fits vertically on this page
+        if (page.currentY + cellHeight > this._configuration.spriteAtlasHeight) {
+            // Current page is full — create a new one
+            page = this._createPage();
+            this._pages.push(page);
+        }
+        return page;
+    }
+    _getAtlasCellDimension(size) {
+        return Math.max(1, Math.ceil(size));
     }
-    _drawVectorShape(rawElements, boundingBox, scalingFactor) {
-        this._spritesCanvasContext.save();
-        this._spritesCanvasContext.globalCompositeOperation = "destination-over";
-        this._spritesCanvasContext.translate(this._currentX + Math.ceil(boundingBox.strokeInset / 2), this._currentY + Math.ceil(boundingBox.strokeInset / 2));
-        this._spritesCanvasContext.scale(scalingFactor.x, scalingFactor.y);
-        this._spritesCanvasContext.beginPath();
+    _extrudeSpriteEdges(page, x, y, width, height) {
+        const padding = Math.min(2, Math.floor(this._configuration.gapSize / 2));
+        const pixelX = Math.floor(x);
+        const pixelY = Math.floor(y);
+        const pixelWidth = Math.ceil(width);
+        const pixelHeight = Math.ceil(height);
+        if (padding <= 0 || pixelWidth <= 0 || pixelHeight <= 0) {
+            return;
+        }
+        for (let offset = 1; offset <= padding; offset++) {
+            // Left edge
+            if (pixelX - offset >= 0) {
+                page.context.drawImage(page.canvas, pixelX, pixelY, 1, pixelHeight, pixelX - offset, pixelY, 1, pixelHeight);
+            }
+            // Right edge
+            if (pixelX + pixelWidth - 1 + offset < this._configuration.spriteAtlasWidth) {
+                page.context.drawImage(page.canvas, pixelX + pixelWidth - 1, pixelY, 1, pixelHeight, pixelX + pixelWidth - 1 + offset, pixelY, 1, pixelHeight);
+            }
+            // Top edge
+            if (pixelY - offset >= 0) {
+                page.context.drawImage(page.canvas, pixelX, pixelY, pixelWidth, 1, pixelX, pixelY - offset, pixelWidth, 1);
+            }
+            // Bottom edge
+            if (pixelY + pixelHeight - 1 + offset < this._configuration.spriteAtlasHeight) {
+                page.context.drawImage(page.canvas, pixelX, pixelY + pixelHeight - 1, pixelWidth, 1, pixelX, pixelY + pixelHeight - 1 + offset, pixelWidth, 1);
+            }
+            // Top-left corner
+            if (pixelX - offset >= 0 && pixelY - offset >= 0) {
+                page.context.drawImage(page.canvas, pixelX, pixelY, 1, 1, pixelX - offset, pixelY - offset, 1, 1);
+            }
+            // Top-right corner
+            if (pixelX + pixelWidth - 1 + offset < this._configuration.spriteAtlasWidth && pixelY - offset >= 0) {
+                page.context.drawImage(page.canvas, pixelX + pixelWidth - 1, pixelY, 1, 1, pixelX + pixelWidth - 1 + offset, pixelY - offset, 1, 1);
+            }
+            // Bottom-left corner
+            if (pixelX - offset >= 0 && pixelY + pixelHeight - 1 + offset < this._configuration.spriteAtlasHeight) {
+                page.context.drawImage(page.canvas, pixelX, pixelY + pixelHeight - 1, 1, 1, pixelX - offset, pixelY + pixelHeight - 1 + offset, 1, 1);
+            }
+            // Bottom-right corner
+            if (pixelX + pixelWidth - 1 + offset < this._configuration.spriteAtlasWidth && pixelY + pixelHeight - 1 + offset < this._configuration.spriteAtlasHeight) {
+                page.context.drawImage(page.canvas, pixelX + pixelWidth - 1, pixelY + pixelHeight - 1, 1, 1, pixelX + pixelWidth - 1 + offset, pixelY + pixelHeight - 1 + offset, 1, 1);
+            }
+        }
+    }
+    _drawVectorShape(rawElements, boundingBox, scalingFactor, page) {
+        page.context.save();
+        page.context.globalCompositeOperation = "destination-over";
+        page.context.translate(page.currentX + Math.ceil(boundingBox.strokeInset / 2), page.currentY + Math.ceil(boundingBox.strokeInset / 2));
+        page.context.scale(scalingFactor.x, scalingFactor.y);
+        page.context.beginPath();
+        page.context.rect(0, 0, boundingBox.width, boundingBox.height);
+        page.context.clip();
+        page.context.beginPath();
         for (let i = 0; i < rawElements.length; i++) {
             const shape = rawElements[i];
             switch (shape.ty) {
                 case "rc":
-                    this._drawRectangle(shape, boundingBox);
+                    this._drawRectangle(shape, boundingBox, page.context);
+                    break;
+                case "el":
+                    this._drawEllipse(shape, boundingBox, page.context);
                     break;
                 case "sh":
-                    this._drawPath(shape, boundingBox);
+                    this._drawPath(shape, boundingBox, page.context);
                     break;
                 case "fl":
-                    this._drawFill(shape);
+                    this._drawFill(shape, page.context);
                     break;
                 case "st":
-                    this._drawStroke(shape);
+                    this._drawStroke(shape, page.context);
                     break;
                 case "gf":
-                    this._drawGradientFill(shape, boundingBox);
+                    this._drawGradientFill(shape, boundingBox, page.context);
                     break;
                 case "tr":
                     break; // Nothing needed with transforms
             }
         }
-        this._spritesCanvasContext.restore();
+        page.context.restore();
     }
-    // This function assumes that GetTextBoundingBox has already been called as to measure the text
-    // we need to setup the canvas context with the correct font and styles, so we don't set them up here
-    // again, but we still need to make sure to restore the context when we are done
-    _drawText(textData, boundingBox, scalingFactor) {
+    _drawText(textData, boundingBox, scalingFactor, page) {
         if (this._rawFonts === undefined) {
-            this._spritesCanvasContext.restore();
             return;
         }
-        this._spritesCanvasContext.translate(this._currentX, this._currentY);
-        this._spritesCanvasContext.scale(scalingFactor.x, scalingFactor.y);
         const textInfo = textData.d.k[0].s;
+        const fontFamily = textInfo.f;
+        const finalFont = this._rawFonts.get(fontFamily);
+        if (!finalFont) {
+            return;
+        }
+        page.context.save();
+        page.context.translate(page.currentX, page.currentY);
+        page.context.scale(scalingFactor.x, scalingFactor.y);
+        // Set up font (same setup as GetTextBoundingBox for measurement consistency)
+        const weight = finalFont.fWeight || "400";
+        page.context.font = `${weight} ${textInfo.s}px ${finalFont.fFamily}`;
+        if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0) {
+            page.context.lineWidth = textInfo.sw;
+        }
+        // Clip to cell bounds to prevent text overdraw into adjacent cells
+        page.context.beginPath();
+        page.context.rect(0, 0, boundingBox.width, boundingBox.height);
+        page.context.clip();
         if (textInfo.fc !== undefined && textInfo.fc.length >= 3) {
             const rawFillStyle = textInfo.fc;
             if (Array.isArray(rawFillStyle)) {
                 // If the fill style is an array, we assume it's a color array
-                this._spritesCanvasContext.fillStyle = this._lottieColorToCSSColor(rawFillStyle, 1);
+                page.context.fillStyle = this._lottieColorToCSSColor(rawFillStyle, 1);
             }
             else {
                 // If it's a string, we need to get the value from the variables map
                 const variableFillStyle = this._variables.get(rawFillStyle);
                 if (variableFillStyle !== undefined) {
-                    this._spritesCanvasContext.fillStyle = variableFillStyle;
+                    page.context.fillStyle = variableFillStyle;
                 }
             }
         }
         if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0) {
-            this._spritesCanvasContext.strokeStyle = this._lottieColorToCSSColor(textInfo.sc, 1);
+            page.context.strokeStyle = this._lottieColorToCSSColor(textInfo.sc, 1);
         }
         // Text is supported as a possible variable (for localization for example)
         // Check if the text is a variable and replace it if it is
@@ -226,13 +336,13 @@ export class SpritePacker {
         if (variableText !== undefined) {
             text = variableText;
         }
-        this._spritesCanvasContext.fillText(text, 0, boundingBox.actualBoundingBoxAscent);
+        page.context.fillText(text, 0, boundingBox.actualBoundingBoxAscent);
         if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0 && textInfo.of === true) {
-            this._spritesCanvasContext.strokeText(text, 0, boundingBox.actualBoundingBoxAscent);
+            page.context.strokeText(text, 0, boundingBox.actualBoundingBoxAscent);
         }
-        this._spritesCanvasContext.restore();
+        page.context.restore();
     }
-    _drawRectangle(shape, boundingBox) {
+    _drawRectangle(shape, boundingBox, ctx) {
         const size = GetInitialVectorValues(shape.s);
         const position = GetInitialVectorValues(shape.p);
         const radius = GetInitialScalarValue(shape.r);
@@ -240,13 +350,23 @@ export class SpritePacker {
         const x = position[0] - size[0] / 2 + boundingBox.centerX - Math.ceil(boundingBox.strokeInset);
         const y = position[1] - size[1] / 2 + boundingBox.centerY - Math.ceil(boundingBox.strokeInset);
         if (radius <= 0) {
-            this._spritesCanvasContext.rect(x, y, size[0], size[1]);
+            ctx.rect(x, y, size[0], size[1]);
         }
         else {
-            this._spritesCanvasContext.roundRect(x, y, size[0], size[1], radius);
+            ctx.roundRect(x, y, size[0], size[1], radius);
         }
     }
-    _drawPath(shape, boundingBox) {
+    _drawEllipse(shape, boundingBox, ctx) {
+        const size = GetInitialVectorValues(shape.s);
+        const position = GetInitialVectorValues(shape.p);
+        const centerX = position[0] + boundingBox.centerX - Math.ceil(boundingBox.strokeInset);
+        const centerY = position[1] + boundingBox.centerY - Math.ceil(boundingBox.strokeInset);
+        const radiusX = size[0] / 2;
+        const radiusY = size[1] / 2;
+        ctx.moveTo(centerX + radiusX, centerY);
+        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+    }
+    _drawPath(shape, boundingBox, ctx) {
         // The path data has to be translated to the center of the bounding box
         // If the paths have stroke, we need to account for the stroke width
         const pathData = GetInitialBezierData(shape.ks);
@@ -259,13 +379,13 @@ export class SpritePacker {
         const inTangents = pathData.i;
         const outTangents = pathData.o;
         if (vertices.length > 0) {
-            this._spritesCanvasContext.moveTo(vertices[0][0] + xTranslate, vertices[0][1] + yTranslate);
+            ctx.moveTo(vertices[0][0] + xTranslate, vertices[0][1] + yTranslate);
             for (let i = 0; i < vertices.length - 1; i++) {
                 const start = vertices[i];
                 const end = vertices[i + 1];
                 const outTangent = outTangents[i];
                 const inTangent = inTangents[i + 1];
-                this._spritesCanvasContext.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
+                ctx.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
             }
             if (pathData.c) {
                 // Close path with curve from last to first point
@@ -273,34 +393,34 @@ export class SpritePacker {
                 const end = vertices[0];
                 const outTangent = outTangents[vertices.length - 1];
                 const inTangent = inTangents[0];
-                this._spritesCanvasContext.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
-                this._spritesCanvasContext.closePath();
+                ctx.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
+                ctx.closePath();
             }
         }
     }
-    _drawFill(fill) {
+    _drawFill(fill, ctx) {
         const color = this._lottieColorToCSSColor(fill.c.k, fill.o.k / 100);
-        this._spritesCanvasContext.fillStyle = color;
-        this._spritesCanvasContext.fill();
+        ctx.fillStyle = color;
+        ctx.fill();
     }
-    _drawStroke(stroke) {
+    _drawStroke(stroke, ctx) {
         // Color and opacity
         const opacity = stroke.o?.k ?? 100;
         const color = this._lottieColorToCSSColor(stroke.c?.k ?? [0, 0, 0], opacity / 100);
-        this._spritesCanvasContext.strokeStyle = color;
+        ctx.strokeStyle = color;
         // Width
         const width = stroke.w?.k ?? 1;
-        this._spritesCanvasContext.lineWidth = width;
+        ctx.lineWidth = width;
         // Line cap
         switch (stroke.lc) {
             case 1:
-                this._spritesCanvasContext.lineCap = "butt";
+                ctx.lineCap = "butt";
                 break;
             case 2:
-                this._spritesCanvasContext.lineCap = "round";
+                ctx.lineCap = "round";
                 break;
             case 3:
-                this._spritesCanvasContext.lineCap = "square";
+                ctx.lineCap = "square";
                 break;
             default:
                 // leave default
@@ -309,13 +429,13 @@ export class SpritePacker {
         // Line join
         switch (stroke.lj) {
             case 1:
-                this._spritesCanvasContext.lineJoin = "miter";
+                ctx.lineJoin = "miter";
                 break;
             case 2:
-                this._spritesCanvasContext.lineJoin = "round";
+                ctx.lineJoin = "round";
                 break;
             case 3:
-                this._spritesCanvasContext.lineJoin = "bevel";
+                ctx.lineJoin = "bevel";
                 break;
             default:
                 // leave default
@@ -323,7 +443,7 @@ export class SpritePacker {
         }
         // Miter limit
         if (stroke.ml !== undefined) {
-            this._spritesCanvasContext.miterLimit = stroke.ml;
+            ctx.miterLimit = stroke.ml;
         }
         // Dash pattern
         const dashes = stroke.d;
@@ -334,35 +454,35 @@ export class SpritePacker {
                     lineDashes.push(dashes[i].v.k);
                 }
             }
-            this._spritesCanvasContext.setLineDash(lineDashes);
+            ctx.setLineDash(lineDashes);
         }
-        this._spritesCanvasContext.stroke();
+        ctx.stroke();
     }
-    _drawGradientFill(fill, boundingBox) {
+    _drawGradientFill(fill, boundingBox, ctx) {
         switch (fill.t) {
             case 1: {
-                this._drawLinearGradientFill(fill, boundingBox);
+                this._drawLinearGradientFill(fill, boundingBox, ctx);
                 break;
             }
             case 2: {
-                this._drawRadialGradientFill(fill, boundingBox);
+                this._drawRadialGradientFill(fill, boundingBox, ctx);
                 break;
             }
         }
     }
-    _drawLinearGradientFill(fill, boundingBox) {
+    _drawLinearGradientFill(fill, boundingBox, ctx) {
         // We need to translate the gradient to the center of the bounding box
         const xTranslate = boundingBox.centerX;
         const yTranslate = boundingBox.centerY;
         // Create the gradient
         const startPoint = fill.s.k;
         const endPoint = fill.e.k;
-        const gradient = this._spritesCanvasContext.createLinearGradient(startPoint[0] + xTranslate, startPoint[1] + yTranslate, endPoint[0] + xTranslate, endPoint[1] + yTranslate);
+        const gradient = ctx.createLinearGradient(startPoint[0] + xTranslate, startPoint[1] + yTranslate, endPoint[0] + xTranslate, endPoint[1] + yTranslate);
         this._addColorStops(gradient, fill);
-        this._spritesCanvasContext.fillStyle = gradient;
-        this._spritesCanvasContext.fill();
+        ctx.fillStyle = gradient;
+        ctx.fill();
     }
-    _drawRadialGradientFill(fill, boundingBox) {
+    _drawRadialGradientFill(fill, boundingBox, ctx) {
         // We need to translate the gradient to the center of the bounding box
         const xTranslate = boundingBox.centerX;
         const yTranslate = boundingBox.centerY;
@@ -372,10 +492,10 @@ export class SpritePacker {
         const centerX = startPoint[0] + xTranslate;
         const centerY = startPoint[1] + yTranslate;
         const outerRadius = Math.hypot(endPoint[0] - startPoint[0], endPoint[1] - startPoint[1]);
-        const gradient = this._spritesCanvasContext.createRadialGradient(centerX, centerY, 0, centerX, centerY, outerRadius);
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, outerRadius);
         this._addColorStops(gradient, fill);
-        this._spritesCanvasContext.fillStyle = gradient;
-        this._spritesCanvasContext.fill();
+        ctx.fillStyle = gradient;
+        ctx.fill();
     }
     _addColorStops(gradient, fill) {
         const stops = fill.g.p;