@remotion/web-renderer 4.0.395 → 4.0.397

package/dist/border-radius.d.ts

@@ -0,0 +1,31 @@
+export type BorderRadiusCorners = {
+    topLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+    topRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomRight: {
+        horizontal: number;
+        vertical: number;
+    };
+    bottomLeft: {
+        horizontal: number;
+        vertical: number;
+    };
+};
+export declare function parseBorderRadius({ borderRadius, width, height, }: {
+    borderRadius: string;
+    width: number;
+    height: number;
+}): BorderRadiusCorners;
+export declare function setBorderRadius({ ctx, x, y, width, height, borderRadius, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: BorderRadiusCorners;
+}): () => void;

package/dist/border-radius.js

@@ -0,0 +1,152 @@
+function parseValue({ value, reference, }) {
+    value = value.trim();
+    if (value.endsWith('%')) {
+        const percentage = parseFloat(value);
+        return (percentage / 100) * reference;
+    }
+    if (value.endsWith('px')) {
+        return parseFloat(value);
+    }
+    // If no unit, assume pixels
+    return parseFloat(value);
+}
+function expandShorthand(values) {
+    if (values.length === 1) {
+        // All corners the same
+        return [values[0], values[0], values[0], values[0]];
+    }
+    if (values.length === 2) {
+        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
+        return [values[0], values[1], values[0], values[1]];
+    }
+    if (values.length === 3) {
+        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
+        return [values[0], values[1], values[2], values[1]];
+    }
+    // 4 values: top-left, top-right, bottom-right, bottom-left
+    return [values[0], values[1], values[2], values[3]];
+}
+function clampBorderRadius({ borderRadius, width, height, }) {
+    // According to CSS spec, if the sum of border radii on adjacent corners
+    // exceeds the length of the edge, they should be proportionally reduced
+    const clamped = {
+        topLeft: { ...borderRadius.topLeft },
+        topRight: { ...borderRadius.topRight },
+        bottomRight: { ...borderRadius.bottomRight },
+        bottomLeft: { ...borderRadius.bottomLeft },
+    };
+    // Check top edge
+    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
+    if (topSum > width) {
+        const factor = width / topSum;
+        clamped.topLeft.horizontal *= factor;
+        clamped.topRight.horizontal *= factor;
+    }
+    // Check right edge
+    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
+    if (rightSum > height) {
+        const factor = height / rightSum;
+        clamped.topRight.vertical *= factor;
+        clamped.bottomRight.vertical *= factor;
+    }
+    // Check bottom edge
+    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
+    if (bottomSum > width) {
+        const factor = width / bottomSum;
+        clamped.bottomRight.horizontal *= factor;
+        clamped.bottomLeft.horizontal *= factor;
+    }
+    // Check left edge
+    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
+    if (leftSum > height) {
+        const factor = height / leftSum;
+        clamped.bottomLeft.vertical *= factor;
+        clamped.topLeft.vertical *= factor;
+    }
+    return clamped;
+}
+export function parseBorderRadius({ borderRadius, width, height, }) {
+    // Split by '/' to separate horizontal and vertical radii
+    const parts = borderRadius.split('/').map((part) => part.trim());
+    const horizontalPart = parts[0];
+    const verticalPart = parts[1];
+    // Split each part into individual values
+    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
+    const verticalValues = verticalPart
+        ? verticalPart.split(/\s+/).filter((v) => v)
+        : horizontalValues; // If no '/', use horizontal values for vertical
+    // Expand shorthand to 4 values
+    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
+    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
+    return clampBorderRadius({
+        borderRadius: {
+            topLeft: {
+                horizontal: parseValue({ value: hTopLeft, reference: width }),
+                vertical: parseValue({ value: vTopLeft, reference: height }),
+            },
+            topRight: {
+                horizontal: parseValue({ value: hTopRight, reference: width }),
+                vertical: parseValue({ value: vTopRight, reference: height }),
+            },
+            bottomRight: {
+                horizontal: parseValue({ value: hBottomRight, reference: width }),
+                vertical: parseValue({ value: vBottomRight, reference: height }),
+            },
+            bottomLeft: {
+                horizontal: parseValue({ value: hBottomLeft, reference: width }),
+                vertical: parseValue({ value: vBottomLeft, reference: height }),
+            },
+        },
+        width,
+        height,
+    });
+}
+export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
+    if (borderRadius.topLeft.horizontal === 0 &&
+        borderRadius.topLeft.vertical === 0 &&
+        borderRadius.topRight.horizontal === 0 &&
+        borderRadius.topRight.vertical === 0 &&
+        borderRadius.bottomRight.horizontal === 0 &&
+        borderRadius.bottomRight.vertical === 0 &&
+        borderRadius.bottomLeft.horizontal === 0 &&
+        borderRadius.bottomLeft.vertical === 0) {
+        return () => { };
+    }
+    ctx.save();
+    ctx.beginPath();
+    // Start at top-left corner, after the horizontal radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge to top-right corner
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner (elliptical arc)
+    if (borderRadius.topRight.horizontal > 0 ||
+        borderRadius.topRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge to bottom-right corner
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner (elliptical arc)
+    if (borderRadius.bottomRight.horizontal > 0 ||
+        borderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge to bottom-left corner
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner (elliptical arc)
+    if (borderRadius.bottomLeft.horizontal > 0 ||
+        borderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge to top-left corner
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner (elliptical arc)
+    if (borderRadius.topLeft.horizontal > 0 ||
+        borderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+    ctx.clip();
+    return () => {
+        ctx.restore();
+    };
+}

package/dist/calculate-transforms.d.ts

@@ -6,4 +6,6 @@ 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,3 +1,4 @@
+import { parseBorderRadius } from './drawing/border-radius';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -21,8 +22,18 @@ 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 === ''
@@ -70,5 +81,11 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
+        borderRadius: parseBorderRadius({
+            borderRadius,
+            width: dimensions.width,
+            height: dimensions.height,
+        }),
+        opacity,
     };
 };

package/dist/composable.d.ts

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

package/dist/compose-canvas.js

@@ -1,12 +1,36 @@
+import { setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
+import { turnSvgIntoDrawable } from './drawing/compose-svg';
+import { setOpacity } from './drawing/opacity';
+import { setTransform } from './drawing/transform';
 export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
-    context.setTransform(totalMatrix);
+    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
+    if (opacity === 0) {
+        reset();
+        return;
+    }
     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);
-    context.setTransform(new DOMMatrix());
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
     reset();
 };

package/dist/compose.d.ts

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

package/dist/compose.js

@@ -1,24 +1,33 @@
 import { drawDomElement } from './drawing/draw-dom-element';
-import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
+import { processNode } from './drawing/process-node';
 import { handleTextNode } from './drawing/text/handle-text-node';
 import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, offsetLeft, offsetTop, logLevel, }) => {
+const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, }) => {
     if (node instanceof HTMLElement || node instanceof SVGElement) {
-        return drawElementToCanvas({
+        return processNode({
             element: node,
             context,
             draw: drawDomElement(node),
-            offsetLeft,
-            offsetTop,
             logLevel,
+            parentRect,
+            internalState,
+            rootElement,
         });
     }
     if (node instanceof Text) {
-        return handleTextNode({ node, context, offsetLeft, offsetTop, logLevel });
+        return handleTextNode({
+            node,
+            context,
+            logLevel,
+            parentRect,
+            internalState,
+            rootElement,
+        });
     }
     throw new Error('Unknown node type');
 };
-export const compose = async ({ element, context, offsetLeft, offsetTop, logLevel, }) => {
+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
@@ -34,20 +43,44 @@ export const compose = async ({ element, context, offsetLeft, offsetTop, logLeve
         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++;
+            }
+        }
         const val = await walkOverNode({
             node: treeWalker.currentNode,
             context,
-            offsetLeft,
-            offsetTop,
             logLevel,
+            parentRect,
+            internalState,
+            rootElement: element,
         });
-        if (val === 'skip-children') {
+        if (val.type === 'skip-children') {
             if (!skipToNextNonDescendant(treeWalker)) {
                 break;
             }
         }
-        else if (!treeWalker.nextNode()) {
-            break;
+        else {
+            if (val.cleanupAfterChildren) {
+                // Last registered must be cleaned up first
+                cleanupAfterChildren.unshift({
+                    element: treeWalker.currentNode,
+                    cleanupFn: val.cleanupAfterChildren,
+                });
+            }
+            if (!treeWalker.nextNode()) {
+                break;
+            }
         }
     }
+    for (const cleanup of cleanupAfterChildren) {
+        cleanup.cleanupFn();
+    }
 };

package/dist/create-scaffold.js

@@ -10,17 +10,23 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
         throw new Error('@remotion/web-renderer requires React 18 or higher');
     }
     const div = document.createElement('div');
-    // Match same behavior as renderEntry.tsx
+    // Match same behavior as in portal-node.ts
+    div.style.position = 'fixed';
     div.style.display = 'flex';
+    div.style.flexDirection = 'column';
     div.style.backgroundColor = 'transparent';
-    div.style.position = 'fixed';
     div.style.width = `${width}px`;
     div.style.height = `${height}px`;
     div.style.zIndex = '-9999';
     div.style.top = '0';
-    div.style.visibility = 'hidden';
     div.style.left = '0';
+    div.style.right = '0';
+    div.style.bottom = '0';
+    div.style.visibility = 'hidden';
     div.style.pointerEvents = 'none';
+    const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
+    div.className = scaffoldClassName;
+    const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, 'white'));
     document.body.appendChild(div);
     const { promise, resolve, reject } = withResolvers();
     // TODO: This might not work in React 18
@@ -90,6 +96,7 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
         cleanupScaffold: () => {
             root.unmount();
             div.remove();
+            cleanupCSS();
         },
         timeUpdater,
         collectAssets,

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

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

package/dist/drawing/border-radius.js

@@ -1,3 +1,4 @@
+import { drawRoundedRectPath } from './draw-rounded';
 function parseValue({ value, reference, }) {
     value = value.trim();
     if (value.endsWith('%')) {
@@ -101,7 +102,7 @@ export function parseBorderRadius({ borderRadius, width, height, }) {
         height,
     });
 }
-export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
+export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, }) {
     if (borderRadius.topLeft.horizontal === 0 &&
         borderRadius.topLeft.vertical === 0 &&
         borderRadius.topRight.horizontal === 0 &&
@@ -109,42 +110,19 @@ export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
         borderRadius.bottomRight.horizontal === 0 &&
         borderRadius.bottomRight.vertical === 0 &&
         borderRadius.bottomLeft.horizontal === 0 &&
-        borderRadius.bottomLeft.vertical === 0) {
+        borderRadius.bottomLeft.vertical === 0 &&
+        !forceClipEvenWhenZero) {
         return () => { };
     }
     ctx.save();
-    ctx.beginPath();
-    // Start at top-left corner, after the horizontal radius
-    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
-    // Top edge to top-right corner
-    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
-    // Top-right corner (elliptical arc)
-    if (borderRadius.topRight.horizontal > 0 ||
-        borderRadius.topRight.vertical > 0) {
-        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
-    }
-    // Right edge to bottom-right corner
-    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
-    // Bottom-right corner (elliptical arc)
-    if (borderRadius.bottomRight.horizontal > 0 ||
-        borderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
-    }
-    // Bottom edge to bottom-left corner
-    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
-    // Bottom-left corner (elliptical arc)
-    if (borderRadius.bottomLeft.horizontal > 0 ||
-        borderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
-    }
-    // Left edge to top-left corner
-    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
-    // Top-left corner (elliptical arc)
-    if (borderRadius.topLeft.horizontal > 0 ||
-        borderRadius.topLeft.vertical > 0) {
-        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
-    }
-    ctx.closePath();
+    drawRoundedRectPath({
+        ctx,
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+        borderRadius,
+    });
     ctx.clip();
     return () => {
         ctx.restore();

package/dist/drawing/calculate-transforms.d.ts

@@ -1,4 +1,8 @@
-export declare const calculateTransforms: (element: HTMLElement | SVGElement) => {
+import type { LinearGradientInfo } from './parse-linear-gradient';
+export declare const calculateTransforms: ({ element, rootElement, }: {
+    element: HTMLElement | SVGElement;
+    rootElement: HTMLElement | SVGElement;
+}) => {
     dimensions: DOMRect;
     totalMatrix: DOMMatrix;
     reset: () => void;
@@ -6,6 +10,12 @@ export declare const calculateTransforms: (element: HTMLElement | SVGElement) =>
         x: number;
         y: number;
     };
-    opacity: number;
     computedStyle: CSSStyleDeclaration;
+    opacity: number;
+    maskImageInfo: LinearGradientInfo | null;
+    precompositing: {
+        needs3DTransformViaWebGL: boolean;
+        needsMaskImage: LinearGradientInfo | null;
+        needsPrecompositing: boolean;
+    };
 };

package/dist/drawing/calculate-transforms.js

@@ -1,3 +1,5 @@
+import { hasAnyTransformCssValue, hasTransformCssValue } from './has-transform';
+import { getMaskImageValue, parseMaskImage } from './mask-image';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -9,35 +11,42 @@ const getInternalTransformOrigin = (transform) => {
     };
     return origin;
 };
-const getGlobalTransformOrigin = (transform) => {
+const getGlobalTransformOrigin = ({ transform }) => {
     const { x: originX, y: originY } = getInternalTransformOrigin(transform);
     return {
         x: originX + transform.boundingClientRect.left,
         y: originY + transform.boundingClientRect.top,
     };
 };
-export const calculateTransforms = (element) => {
+export const calculateTransforms = ({ element, rootElement, }) => {
     // Compute the cumulative transform by traversing parent nodes
     let parent = element;
     const transforms = [];
     const toReset = [];
     let opacity = 1;
     let elementComputedStyle = null;
+    let maskImageInfo = null;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
-        // Multiply opacity values from element and all parents
-        const parentOpacity = computedStyle.opacity;
-        if (parentOpacity && parentOpacity !== '') {
-            opacity *= parseFloat(parentOpacity);
-        }
         if (parent === element) {
             elementComputedStyle = computedStyle;
+            opacity = parseFloat(computedStyle.opacity);
+            const maskImageValue = getMaskImageValue(computedStyle);
+            maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+            const originalMaskImage = parent.style.maskImage;
+            const originalWebkitMaskImage = parent.style.webkitMaskImage;
+            parent.style.maskImage = 'none';
+            parent.style.webkitMaskImage = 'none';
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.maskImage = originalMaskImage;
+                parentRef.style.webkitMaskImage = originalWebkitMaskImage;
+            });
         }
-        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
-            parent === element) {
-            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
-                ? undefined
-                : computedStyle.transform;
+        if (hasAnyTransformCssValue(computedStyle) || parent === element) {
+            const toParse = hasTransformCssValue(computedStyle)
+                ? computedStyle.transform
+                : undefined;
             const matrix = new DOMMatrix(toParse);
             const { transform, scale, rotate } = parent.style;
             const additionalMatrices = [];
@@ -57,7 +66,7 @@ export const calculateTransforms = (element) => {
             parent.style.scale = 'none';
             parent.style.rotate = 'none';
             transforms.push({
-                rect: parent,
+                element: parent,
                 transformOrigin: computedStyle.transformOrigin,
                 boundingClientRect: null,
                 matrices: additionalMatrices,
@@ -69,20 +78,22 @@ export const calculateTransforms = (element) => {
                 parentRef.style.rotate = rotate;
             });
         }
+        if (parent === rootElement) {
+            break;
+        }
         parent = parent.parentElement;
     }
     for (const transform of transforms) {
-        transform.boundingClientRect = transform.rect.getBoundingClientRect();
+        transform.boundingClientRect = transform.element.getBoundingClientRect();
     }
     const dimensions = transforms[0].boundingClientRect;
     const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
     const totalMatrix = new DOMMatrix();
     for (const transform of transforms.slice().reverse()) {
-        if (!transform.boundingClientRect) {
-            throw new Error('Bounding client rect not found');
-        }
         for (const matrix of transform.matrices) {
-            const globalTransformOrigin = getGlobalTransformOrigin(transform);
+            const globalTransformOrigin = getGlobalTransformOrigin({
+                transform,
+            });
             const transformMatrix = new DOMMatrix()
                 .translate(globalTransformOrigin.x, globalTransformOrigin.y)
                 .multiply(matrix)
@@ -93,6 +104,8 @@ export const calculateTransforms = (element) => {
     if (!elementComputedStyle) {
         throw new Error('Element computed style not found');
     }
+    const needs3DTransformViaWebGL = !totalMatrix.is2D;
+    const needsMaskImage = maskImageInfo !== null;
     return {
         dimensions,
         totalMatrix,
@@ -102,7 +115,13 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
-        opacity,
         computedStyle: elementComputedStyle,
+        opacity,
+        maskImageInfo,
+        precompositing: {
+            needs3DTransformViaWebGL,
+            needsMaskImage: maskImageInfo,
+            needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage),
+        },
     };
 };

package/dist/drawing/canvas-offset-from-rect.d.ts

@@ -0,0 +1,8 @@
+export declare const canvasOffsetFromRect: ({ rect }: {
+    rect: DOMRect;
+}) => {
+    offsetLeft: number;
+    offsetTop: number;
+    canvasWidth: number;
+    canvasHeight: number;
+};