@remotion/web-renderer 4.0.397 → 4.0.399

package/dist/artifact.d.ts

@@ -9,7 +9,7 @@ export declare const onlyArtifact: ({ assets, frameBuffer, }: {
     assets: TRenderAsset[];
     frameBuffer: Blob | OffscreenCanvas | null;
 }) => Promise<EmittedArtifact[]>;
-export type OnArtifact = (asset: EmittedArtifact) => void;
+export type WebRendererOnArtifact = (asset: EmittedArtifact) => void;
 export type ArtifactsRef = React.RefObject<{
     collectAssets: () => TRenderAsset[];
 } | null>;
@@ -18,6 +18,6 @@ export declare const handleArtifacts: () => {
         imageData: Blob | OffscreenCanvas | null;
         frame: number;
         assets: TRenderAsset[];
-        onArtifact: OnArtifact;
+        onArtifact: WebRendererOnArtifact;
     }) => Promise<void>;
 };

package/dist/calculate-transforms.d.ts

@@ -6,6 +6,4 @@ export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement)
         x: number;
         y: number;
     };
-    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
-    opacity: number;
 };

package/dist/calculate-transforms.js

@@ -1,4 +1,3 @@
-import { parseBorderRadius } from './drawing/border-radius';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -22,18 +21,8 @@ export const calculateTransforms = (element) => {
     let parent = element;
     const transforms = [];
     const toReset = [];
-    let borderRadius = '';
-    let opacity = 1;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
-        if (parent === element) {
-            borderRadius = computedStyle.borderRadius;
-        }
-        // Multiply opacity values from element and all parents
-        const parentOpacity = computedStyle.opacity;
-        if (parentOpacity && parentOpacity !== '') {
-            opacity *= parseFloat(parentOpacity);
-        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -81,11 +70,5 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
-        borderRadius: parseBorderRadius({
-            borderRadius,
-            width: dimensions.width,
-            height: dimensions.height,
-        }),
-        opacity,
     };
 };

package/dist/composable.d.ts

@@ -1,4 +1,10 @@
 export type Composable = {
-    type: 'element';
-    element: HTMLElement | SVGElement;
+    type: 'canvas';
+    element: HTMLCanvasElement;
+} | {
+    type: 'svg';
+    element: SVGSVGElement;
+} | {
+    type: 'img';
+    element: HTMLImageElement;
 };

package/dist/compose-canvas.js

@@ -1,36 +1,12 @@
-import { setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './drawing/compose-svg';
-import { setOpacity } from './drawing/opacity';
-import { setTransform } from './drawing/transform';
+import { turnSvgIntoDrawable } from './compose-svg';
 export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
     const drawable = canvas instanceof SVGSVGElement
         ? await turnSvgIntoDrawable(canvas)
         : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
     context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
+    context.setTransform(new DOMMatrix());
     reset();
 };

package/dist/compose.d.ts

@@ -1,9 +1,10 @@
 import type { LogLevel } from 'remotion';
 import type { InternalState } from './internal-state';
-export declare const compose: ({ element, context, logLevel, parentRect, internalState, }: {
+export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: LogLevel;
     parentRect: DOMRect;
     internalState: InternalState;
+    onlyBackgroundClip: boolean;
 }) => Promise<void>;

package/dist/compose.js

@@ -1,8 +1,9 @@
 import { drawDomElement } from './drawing/draw-dom-element';
 import { processNode } from './drawing/process-node';
 import { handleTextNode } from './drawing/text/handle-text-node';
+import { createTreeWalkerCleanupAfterChildren } from './tree-walker-cleanup-after-children';
 import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, }) => {
+const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
     if (node instanceof HTMLElement || node instanceof SVGElement) {
         return processNode({
             element: node,
@@ -22,38 +23,41 @@ const walkOverNode = ({ node, context, logLevel, parentRect, internalState, root
             parentRect,
             internalState,
             rootElement,
+            onlyBackgroundClip,
         });
     }
     throw new Error('Unknown node type');
 };
-export const compose = async ({ element, context, logLevel, parentRect, internalState, }) => {
-    const cleanupAfterChildren = [];
-    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
-        if (node instanceof Element) {
-            // SVG does have children, but we process SVG elements in its
-            // entirety
-            if (node.parentElement instanceof SVGSVGElement) {
-                return NodeFilter.FILTER_REJECT;
-            }
-            const computedStyle = getComputedStyle(node);
-            return computedStyle.display === 'none'
-                ? NodeFilter.FILTER_REJECT
-                : NodeFilter.FILTER_ACCEPT;
-        }
+const getFilterFunction = (node) => {
+    if (!(node instanceof Element)) {
+        // Must be a text node!
         return NodeFilter.FILTER_ACCEPT;
-    });
-    while (true) {
-        for (let i = 0; i < cleanupAfterChildren.length;) {
-            const cleanup = cleanupAfterChildren[i];
-            if (!(cleanup.element === treeWalker.currentNode ||
-                cleanup.element.contains(treeWalker.currentNode))) {
-                cleanup.cleanupFn();
-                cleanupAfterChildren.splice(i, 1);
-            }
-            else {
-                i++;
-            }
+    }
+    // SVG does have children, but we process SVG elements in its
+    // entirety
+    if (node.parentElement instanceof SVGSVGElement) {
+        return NodeFilter.FILTER_REJECT;
+    }
+    const computedStyle = getComputedStyle(node);
+    if (computedStyle.display === 'none') {
+        return NodeFilter.FILTER_REJECT;
+    }
+    return NodeFilter.FILTER_ACCEPT;
+};
+export const compose = async ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }) => {
+    const treeWalker = document.createTreeWalker(element, onlyBackgroundClip
+        ? NodeFilter.SHOW_TEXT
+        : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    // Skip to the first text node
+    if (onlyBackgroundClip) {
+        treeWalker.nextNode();
+        if (!treeWalker.currentNode) {
+            return;
         }
+    }
+    const { checkCleanUpAtBeginningOfIteration, addCleanup, cleanupInTheEndOfTheIteration, } = createTreeWalkerCleanupAfterChildren(treeWalker);
+    while (true) {
+        checkCleanUpAtBeginningOfIteration();
         const val = await walkOverNode({
             node: treeWalker.currentNode,
             context,
@@ -61,6 +65,7 @@ export const compose = async ({ element, context, logLevel, parentRect, internal
             parentRect,
             internalState,
             rootElement: element,
+            onlyBackgroundClip,
         });
         if (val.type === 'skip-children') {
             if (!skipToNextNonDescendant(treeWalker)) {
@@ -69,18 +74,12 @@ export const compose = async ({ element, context, logLevel, parentRect, internal
         }
         else {
             if (val.cleanupAfterChildren) {
-                // Last registered must be cleaned up first
-                cleanupAfterChildren.unshift({
-                    element: treeWalker.currentNode,
-                    cleanupFn: val.cleanupAfterChildren,
-                });
+                addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
             }
             if (!treeWalker.nextNode()) {
                 break;
             }
         }
     }
-    for (const cleanup of cleanupAfterChildren) {
-        cleanup.cleanupFn();
-    }
+    cleanupInTheEndOfTheIteration();
 };

package/dist/drawing/border-radius.d.ts

@@ -21,9 +21,11 @@ export declare function parseBorderRadius({ borderRadius, width, height, }: {
     width: number;
     height: number;
 }): BorderRadiusCorners;
-export declare function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero, }: {
+export declare function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero, computedStyle, backgroundClip, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     forceClipEvenWhenZero: boolean;
+    computedStyle: CSSStyleDeclaration;
+    backgroundClip: string;
 }): () => void;

package/dist/drawing/border-radius.js

@@ -1,4 +1,5 @@
 import { drawRoundedRectPath } from './draw-rounded';
+import { getBoxBasedOnBackgroundClip } from './get-padding-box';
 function parseValue({ value, reference, }) {
     value = value.trim();
     if (value.endsWith('%')) {
@@ -102,7 +103,7 @@ export function parseBorderRadius({ borderRadius, width, height, }) {
         height,
     });
 }
-export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, }) {
+export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, computedStyle, backgroundClip, }) {
     if (borderRadius.topLeft.horizontal === 0 &&
         borderRadius.topLeft.vertical === 0 &&
         borderRadius.topRight.horizontal === 0 &&
@@ -115,13 +116,33 @@ export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero
         return () => { };
     }
     ctx.save();
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    // See background-clip tests for why this logic matters!
+    const actualBorderRadius = {
+        topLeft: {
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - (boundingRect.left - rect.left)),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - (boundingRect.top - rect.top)),
+        },
+        topRight: {
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - (rect.right - boundingRect.right)),
+            vertical: Math.max(0, borderRadius.topRight.vertical - (boundingRect.top - rect.top)),
+        },
+        bottomRight: {
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - (rect.right - boundingRect.right)),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - (rect.bottom - boundingRect.bottom)),
+        },
+        bottomLeft: {
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - (boundingRect.left - rect.left)),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - (rect.bottom - boundingRect.bottom)),
+        },
+    };
     drawRoundedRectPath({
         ctx,
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height,
-        borderRadius,
+        x: boundingRect.left,
+        y: boundingRect.top,
+        width: boundingRect.width,
+        height: boundingRect.height,
+        borderRadius: actualBorderRadius,
     });
     ctx.clip();
     return () => {

package/dist/drawing/calculate-object-fit.d.ts

@@ -0,0 +1,40 @@
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+export type ObjectFitResult = {
+    sourceX: number;
+    sourceY: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    destX: number;
+    destY: number;
+    destWidth: number;
+    destHeight: number;
+};
+type ObjectFitParams = {
+    containerSize: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    };
+    intrinsicSize: {
+        width: number;
+        height: number;
+    };
+};
+/**
+ * Calculates how to draw an image based on object-fit CSS property.
+ *
+ * @param objectFit - The CSS object-fit value
+ * @param containerSize - The container dimensions (where the image should be drawn)
+ * @param intrinsicSize - The natural/intrinsic size of the image
+ * @returns Source and destination rectangles for drawImage
+ */
+export declare const calculateObjectFit: ({ objectFit, containerSize, intrinsicSize, }: {
+    objectFit: ObjectFit;
+} & ObjectFitParams) => ObjectFitResult;
+/**
+ * Parse an object-fit CSS value string into our ObjectFit type.
+ * Returns 'fill' as the default if the value is not recognized.
+ */
+export declare const parseObjectFit: (value: string | null | undefined) => ObjectFit;
+export {};

package/dist/drawing/calculate-object-fit.js

@@ -0,0 +1,208 @@
+/**
+ * fill: Stretch the image to fill the container, ignoring aspect ratio
+ */
+const calculateFill = ({ containerSize, intrinsicSize, }) => {
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * contain: Scale the image to fit inside the container while maintaining aspect ratio.
+ * This may result in letterboxing (empty space on sides or top/bottom).
+ */
+const calculateContain = ({ containerSize, intrinsicSize, }) => {
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let destWidth;
+    let destHeight;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container (relative to their heights)
+        // Fit by width, letterbox top/bottom
+        destWidth = containerSize.width;
+        destHeight = containerSize.width / imageAspect;
+    }
+    else {
+        // Image is taller than container (relative to their widths)
+        // Fit by height, letterbox left/right
+        destHeight = containerSize.height;
+        destWidth = containerSize.height * imageAspect;
+    }
+    // Center the image in the container
+    const destX = containerSize.left + (containerSize.width - destWidth) / 2;
+    const destY = containerSize.top + (containerSize.height - destHeight) / 2;
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * cover: Scale the image to cover the container while maintaining aspect ratio.
+ * Parts of the image may be cropped.
+ */
+const calculateCover = ({ containerSize, intrinsicSize, }) => {
+    // Guard against zero or non-positive heights to avoid division by zero and NaN/Infinity.
+    if (containerSize.height <= 0 || intrinsicSize.height <= 0) {
+        return {
+            sourceX: 0,
+            sourceY: 0,
+            sourceWidth: 0,
+            sourceHeight: 0,
+            destX: containerSize.left,
+            destY: containerSize.top,
+            destWidth: 0,
+            destHeight: 0,
+        };
+    }
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container - crop horizontally
+        // Scale by height, then crop width
+        sourceWidth = intrinsicSize.height * containerAspect;
+        sourceX = (intrinsicSize.width - sourceWidth) / 2;
+    }
+    else {
+        // Image is taller than container - crop vertically
+        // Scale by width, then crop height
+        sourceHeight = intrinsicSize.width / containerAspect;
+        sourceY = (intrinsicSize.height - sourceHeight) / 2;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * none: Draw the image at its natural size, centered in the container.
+ * Clips to the container bounds if the image overflows.
+ */
+const calculateNone = ({ containerSize, intrinsicSize, }) => {
+    // Calculate centered position (can be negative if image is larger than container)
+    const centeredX = containerSize.left + (containerSize.width - intrinsicSize.width) / 2;
+    const centeredY = containerSize.top + (containerSize.height - intrinsicSize.height) / 2;
+    // Calculate clipping bounds
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    let destX = centeredX;
+    let destY = centeredY;
+    let destWidth = intrinsicSize.width;
+    let destHeight = intrinsicSize.height;
+    // Clip left edge
+    if (destX < containerSize.left) {
+        const clipAmount = containerSize.left - destX;
+        sourceX = clipAmount;
+        sourceWidth -= clipAmount;
+        destX = containerSize.left;
+        destWidth -= clipAmount;
+    }
+    // Clip top edge
+    if (destY < containerSize.top) {
+        const clipAmount = containerSize.top - destY;
+        sourceY = clipAmount;
+        sourceHeight -= clipAmount;
+        destY = containerSize.top;
+        destHeight -= clipAmount;
+    }
+    // Clip right edge
+    const containerRight = containerSize.left + containerSize.width;
+    if (destX + destWidth > containerRight) {
+        const clipAmount = destX + destWidth - containerRight;
+        sourceWidth -= clipAmount;
+        destWidth -= clipAmount;
+    }
+    // Clip bottom edge
+    const containerBottom = containerSize.top + containerSize.height;
+    if (destY + destHeight > containerBottom) {
+        const clipAmount = destY + destHeight - containerBottom;
+        sourceHeight -= clipAmount;
+        destHeight -= clipAmount;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * Calculates how to draw an image based on object-fit CSS property.
+ *
+ * @param objectFit - The CSS object-fit value
+ * @param containerSize - The container dimensions (where the image should be drawn)
+ * @param intrinsicSize - The natural/intrinsic size of the image
+ * @returns Source and destination rectangles for drawImage
+ */
+export const calculateObjectFit = ({ objectFit, containerSize, intrinsicSize, }) => {
+    switch (objectFit) {
+        case 'fill':
+            return calculateFill({ containerSize, intrinsicSize });
+        case 'contain':
+            return calculateContain({ containerSize, intrinsicSize });
+        case 'cover':
+            return calculateCover({ containerSize, intrinsicSize });
+        case 'none':
+            return calculateNone({ containerSize, intrinsicSize });
+        case 'scale-down': {
+            // scale-down behaves like contain or none, whichever results in a smaller image
+            const containResult = calculateContain({ containerSize, intrinsicSize });
+            const noneResult = calculateNone({ containerSize, intrinsicSize });
+            // Compare the rendered size - use whichever is smaller
+            const containArea = containResult.destWidth * containResult.destHeight;
+            const noneArea = noneResult.destWidth * noneResult.destHeight;
+            return containArea < noneArea ? containResult : noneResult;
+        }
+        default: {
+            const exhaustiveCheck = objectFit;
+            throw new Error(`Unknown object-fit value: ${exhaustiveCheck}`);
+        }
+    }
+};
+/**
+ * Parse an object-fit CSS value string into our ObjectFit type.
+ * Returns 'fill' as the default if the value is not recognized.
+ */
+export const parseObjectFit = (value) => {
+    if (!value) {
+        return 'fill';
+    }
+    const normalized = value.trim().toLowerCase();
+    switch (normalized) {
+        case 'fill':
+        case 'contain':
+        case 'cover':
+        case 'none':
+        case 'scale-down':
+            return normalized;
+        default:
+            return 'fill';
+    }
+};

package/dist/drawing/draw-background.d.ts

@@ -0,0 +1,13 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const drawBackground: ({ backgroundImage, context, rect, backgroundColor, backgroundClip, element, logLevel, internalState, computedStyle, }: {
+    backgroundImage: string;
+    context: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    backgroundColor: string;
+    backgroundClip: string;
+    element: HTMLElement | SVGElement;
+    logLevel: LogLevel;
+    internalState: InternalState;
+    computedStyle: CSSStyleDeclaration;
+}) => Promise<void>;

package/dist/drawing/draw-background.js

@@ -0,0 +1,62 @@
+import { getClippedBackground } from './get-clipped-background';
+import { getBoxBasedOnBackgroundClip } from './get-padding-box';
+import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
+export const drawBackground = async ({ backgroundImage, context, rect, backgroundColor, backgroundClip, element, logLevel, internalState, computedStyle, }) => {
+    let contextToDraw = context;
+    const originalCompositeOperation = context.globalCompositeOperation;
+    let offsetLeft = 0;
+    let offsetTop = 0;
+    const finish = () => {
+        context.globalCompositeOperation = originalCompositeOperation;
+        if (context !== contextToDraw) {
+            context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width, contextToDraw.canvas.height);
+        }
+    };
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    if (backgroundClip.includes('text')) {
+        offsetLeft = boundingRect.left;
+        offsetTop = boundingRect.top;
+        const originalBackgroundClip = element.style.backgroundClip;
+        const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
+        element.style.backgroundClip = 'initial';
+        element.style.webkitBackgroundClip = 'initial';
+        const drawn = await getClippedBackground({
+            element,
+            boundingRect,
+            logLevel,
+            internalState,
+        });
+        element.style.backgroundClip = originalBackgroundClip;
+        element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
+        contextToDraw = drawn;
+        contextToDraw.globalCompositeOperation = 'source-in';
+    }
+    if (backgroundImage && backgroundImage !== 'none') {
+        const gradientInfo = parseLinearGradient(backgroundImage);
+        if (gradientInfo) {
+            const gradient = createCanvasGradient({
+                ctx: contextToDraw,
+                rect: boundingRect,
+                gradientInfo,
+                offsetLeft,
+                offsetTop,
+            });
+            const originalFillStyle = contextToDraw.fillStyle;
+            contextToDraw.fillStyle = gradient;
+            contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+            contextToDraw.fillStyle = originalFillStyle;
+            return finish();
+        }
+    }
+    // Fallback to solid background color if no gradient was drawn
+    if (backgroundColor &&
+        backgroundColor !== 'transparent' &&
+        !(backgroundColor.startsWith('rgba') &&
+            (backgroundColor.endsWith(', 0)') || backgroundColor.endsWith(',0')))) {
+        const originalFillStyle = contextToDraw.fillStyle;
+        contextToDraw.fillStyle = backgroundColor;
+        contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetLeft, boundingRect.width, boundingRect.height);
+        contextToDraw.fillStyle = originalFillStyle;
+    }
+    finish();
+};

package/dist/drawing/draw-box-shadow.d.ts

@@ -8,7 +8,7 @@ interface BoxShadow {
     inset: boolean;
 }
 export declare const parseBoxShadow: (boxShadowValue: string) => BoxShadow[];
-export declare const setBoxShadow: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
+export declare const drawBorderRadius: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;

package/dist/drawing/draw-box-shadow.js

@@ -43,7 +43,7 @@ export const parseBoxShadow = (boxShadowValue) => {
     }
     return shadows;
 };
-export const setBoxShadow = ({ ctx, rect, borderRadius, computedStyle, logLevel, }) => {
+export const drawBorderRadius = ({ ctx, rect, borderRadius, computedStyle, logLevel, }) => {
     const shadows = parseBoxShadow(computedStyle.boxShadow);
     if (shadows.length === 0) {
         return;