@remotion/web-renderer 4.0.390 → 4.0.392

package/dist/audio.js

@@ -1,10 +1,14 @@
 const TARGET_NUMBER_OF_CHANNELS = 2;
 const TARGET_SAMPLE_RATE = 48000;
 function mixAudio(waves, length) {
-    if (waves.length === 1) {
+    if (waves.length === 1 && waves[0].length === length) {
         return waves[0];
     }
     const mixed = new Int16Array(length);
+    if (waves.length === 1) {
+        mixed.set(waves[0].subarray(0, length));
+        return mixed;
+    }
     for (let i = 0; i < length; i++) {
         const sum = waves.reduce((acc, wave) => {
             var _a;

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

@@ -0,0 +1,11 @@
+export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
+    dimensions: DOMRect;
+    totalMatrix: DOMMatrix;
+    reset: () => void;
+    nativeTransformOrigin: {
+        x: number;
+        y: number;
+    };
+    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
+    opacity: number;
+};

package/dist/calculate-transforms.js

@@ -0,0 +1,91 @@
+import { parseBorderRadius } from './drawing/border-radius';
+import { parseTransformOrigin } from './parse-transform-origin';
+const getInternalTransformOrigin = (transform) => {
+    var _a;
+    const centerX = transform.boundingClientRect.width / 2;
+    const centerY = transform.boundingClientRect.height / 2;
+    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
+        x: centerX,
+        y: centerY,
+    };
+    return origin;
+};
+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) => {
+    // Compute the cumulative transform by traversing parent nodes
+    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 === ''
+                ? undefined
+                : computedStyle.transform;
+            const matrix = new DOMMatrix(toParse);
+            const { transform } = parent.style;
+            parent.style.transform = 'none';
+            transforms.push({
+                matrix,
+                rect: parent,
+                transformOrigin: computedStyle.transformOrigin,
+                boundingClientRect: null,
+            });
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.transform = transform;
+            });
+        }
+        parent = parent.parentElement;
+    }
+    for (const transform of transforms) {
+        transform.boundingClientRect = transform.rect.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');
+        }
+        const globalTransformOrigin = getGlobalTransformOrigin(transform);
+        const transformMatrix = new DOMMatrix()
+            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
+            .multiply(transform.matrix)
+            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+        totalMatrix.multiplySelf(transformMatrix);
+    }
+    return {
+        dimensions,
+        totalMatrix,
+        reset: () => {
+            for (const reset of toReset) {
+                reset();
+            }
+        },
+        nativeTransformOrigin,
+        borderRadius: parseBorderRadius({
+            borderRadius,
+            width: dimensions.width,
+            height: dimensions.height,
+        }),
+        opacity,
+    };
+};

package/dist/composable.d.ts

@@ -0,0 +1,4 @@
+export type Composable = {
+    type: 'element';
+    element: HTMLElement | SVGElement;
+};

package/dist/composable.js

@@ -0,0 +1 @@
+export {};

package/dist/compose-canvas.d.ts

@@ -0,0 +1 @@
+export declare const composeCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/compose-canvas.js

@@ -0,0 +1,36 @@
+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';
+export const composeCanvas = async (canvas, context) => {
+    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);
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
+    reset();
+};

package/dist/compose-svg.d.ts

@@ -0,0 +1 @@
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/compose-svg.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/create-scaffold.js

@@ -34,6 +34,7 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
         remotion_delayRenderTimeouts: {},
         remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
         remotion_attempt: 0,
+        remotion_delayRenderHandles: [],
     };
     const timeUpdater = createRef();
     const collectAssets = createRef();

package/dist/drawing/calculate-transforms.js

@@ -39,17 +39,34 @@ export const calculateTransforms = (element) => {
                 ? undefined
                 : computedStyle.transform;
             const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
+            const { transform, scale, rotate } = parent.style;
+            const additionalMatrices = [];
+            // The order of transformations is:
+            // 1. Translate --> We do not have to consider it since it changes getClientBoundingRect()
+            // 2. Rotate
+            // 3. Scale
+            // 4. CSS "transform"
+            if (rotate !== '') {
+                additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
+            }
+            if (scale !== '') {
+                additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+            }
+            additionalMatrices.push(matrix);
             parent.style.transform = 'none';
+            parent.style.scale = 'none';
+            parent.style.rotate = 'none';
             transforms.push({
-                matrix,
                 rect: parent,
                 transformOrigin: computedStyle.transformOrigin,
                 boundingClientRect: null,
+                matrices: additionalMatrices,
             });
             const parentRef = parent;
             toReset.push(() => {
                 parentRef.style.transform = transform;
+                parentRef.style.scale = scale;
+                parentRef.style.rotate = rotate;
             });
         }
         parent = parent.parentElement;
@@ -64,12 +81,14 @@ export const calculateTransforms = (element) => {
         if (!transform.boundingClientRect) {
             throw new Error('Bounding client rect not found');
         }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
+        for (const matrix of transform.matrices) {
+            const globalTransformOrigin = getGlobalTransformOrigin(transform);
+            const transformMatrix = new DOMMatrix()
+                .translate(globalTransformOrigin.x, globalTransformOrigin.y)
+                .multiply(matrix)
+                .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+            totalMatrix.multiplySelf(transformMatrix);
+        }
     }
     if (!elementComputedStyle) {
         throw new Error('Element computed style not found');

package/dist/drawing/compose-canvas.d.ts

@@ -0,0 +1 @@
+export declare const drawElementToCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/compose-canvas.js

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

package/dist/drawing/compose-svg.d.ts

@@ -0,0 +1 @@
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/compose-svg.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/drawing/compose.d.ts

@@ -0,0 +1,5 @@
+import type { Composable } from '../composable';
+export declare const compose: ({ composables, context, }: {
+    composables: Composable[];
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/compose.js

@@ -0,0 +1,6 @@
+import { drawElementToCanvas } from './draw-element-to-canvas';
+export const compose = async ({ composables, context, }) => {
+    for (const composable of composables) {
+        await drawElementToCanvas(composable.element, context);
+    }
+};

package/dist/drawing/draw-element-to-canvas.js

@@ -1,8 +1,6 @@
-import { parseBorderRadius, setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { drawBorder } from './draw-border';
-import { setOpacity } from './opacity';
-import { setTransform } from './transform';
+import { drawElement } from './draw-element';
+import { transformIn3d } from './transform-in-3d';
 export const drawElementToCanvas = async ({ element, context, draw, }) => {
     const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
@@ -13,49 +11,44 @@ export const drawElementToCanvas = async ({ element, context, draw, }) => {
         reset();
         return;
     }
-    const background = computedStyle.backgroundColor;
-    const borderRadius = parseBorderRadius({
-        borderRadius: computedStyle.borderRadius,
-        width: dimensions.width,
-        height: dimensions.height,
-    });
-    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,
-    });
-    if (background &&
-        background !== 'transparent' &&
-        !(background.startsWith('rgba') &&
-            (background.endsWith(', 0)') || background.endsWith(',0')))) {
-        const originalFillStyle = context.fillStyle;
-        context.fillStyle = background;
-        context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-        context.fillStyle = originalFillStyle;
+    if (!totalMatrix.is2D) {
+        const offsetLeft = Math.min(dimensions.left, 0);
+        const offsetTop = Math.min(dimensions.top, 0);
+        const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
+        const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+        const context2 = tempCanvas.getContext('2d');
+        if (!context2) {
+            throw new Error('Could not get context');
+        }
+        const adjustedDimensions = new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height);
+        await drawElement({
+            dimensions: adjustedDimensions,
+            computedStyle,
+            context: context2,
+            draw,
+            opacity,
+            totalMatrix: new DOMMatrix(),
+        });
+        const transformed = transformIn3d({
+            canvasWidth: tempCanvasWidth,
+            canvasHeight: tempCanvasHeight,
+            matrix: totalMatrix,
+            sourceCanvas: tempCanvas,
+            offsetLeft,
+            offsetTop,
+        });
+        context.drawImage(transformed, 0, 0);
+    }
+    else {
+        await drawElement({
+            dimensions,
+            computedStyle,
+            context,
+            draw,
+            opacity,
+            totalMatrix,
+        });
     }
-    await draw(dimensions, computedStyle);
-    drawBorder({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-        computedStyle,
-    });
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
     reset();
 };

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

@@ -0,0 +1,8 @@
+export declare const drawElement: ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }: {
+    dimensions: DOMRect;
+    computedStyle: CSSStyleDeclaration;
+    context: OffscreenCanvasRenderingContext2D;
+    opacity: number;
+    totalMatrix: DOMMatrix;
+    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
+}) => Promise<void>;