@remotion/web-renderer 4.0.398 → 4.0.399

package/dist/drawing/draw-dom-element.js

@@ -1,17 +1,85 @@
+import { calculateObjectFit, parseObjectFit } from './calculate-object-fit';
+import { fitSvgIntoItsContainer } from './fit-svg-into-its-dimensions';
 import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
+const getReadableImageError = (err, node) => {
+    if (!(err instanceof DOMException)) {
+        return null;
+    }
+    if (err.name === 'SecurityError') {
+        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
+            `The image is tainted due to CORS restrictions. ` +
+            `The server hosting this image must respond with the "Access-Control-Allow-Origin" header. ` +
+            `See: https://remotion.dev/docs/client-side-rendering/migration`);
+    }
+    if (err.name === 'InvalidStateError') {
+        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
+            `The image is in a broken state. ` +
+            `This usually means the image failed to load - check that the URL is valid and accessible.`);
+    }
+    return null;
+};
+/**
+ * Draw an SVG element using "contain" behavior (the default for SVGs).
+ */
+const drawSvg = ({ drawable, dimensions, contextToDraw, }) => {
+    const fitted = fitSvgIntoItsContainer({
+        containerSize: dimensions,
+        elementSize: {
+            width: drawable.width,
+            height: drawable.height,
+        },
+    });
+    contextToDraw.drawImage(drawable, fitted.left, fitted.top, fitted.width, fitted.height);
+};
+/**
+ * Draw an image or canvas element using the object-fit CSS property.
+ */
+const drawReplacedElement = ({ drawable, dimensions, computedStyle, contextToDraw, }) => {
+    const objectFit = parseObjectFit(computedStyle.objectFit);
+    const intrinsicSize = drawable instanceof HTMLImageElement
+        ? { width: drawable.naturalWidth, height: drawable.naturalHeight }
+        : { width: drawable.width, height: drawable.height };
+    const result = calculateObjectFit({
+        objectFit,
+        containerSize: {
+            width: dimensions.width,
+            height: dimensions.height,
+            left: dimensions.left,
+            top: dimensions.top,
+        },
+        intrinsicSize,
+    });
+    // Use the 9-argument drawImage to support source cropping (for cover mode)
+    contextToDraw.drawImage(drawable, result.sourceX, result.sourceY, result.sourceWidth, result.sourceHeight, result.destX, result.destY, result.destWidth, result.destHeight);
+};
 export const drawDomElement = (node) => {
-    const domDrawFn = async ({ dimensions, contextToDraw }) => {
-        const drawable = await (node instanceof SVGSVGElement
-            ? turnSvgIntoDrawable(node)
-            : node instanceof HTMLImageElement
-                ? node
-                : node instanceof HTMLCanvasElement
-                    ? node
-                    : null);
-        if (!drawable) {
+    const domDrawFn = async ({ dimensions, contextToDraw, computedStyle, }) => {
+        // Handle SVG elements separately - they use "contain" behavior by default
+        if (node instanceof SVGSVGElement) {
+            const drawable = await turnSvgIntoDrawable(node);
+            drawSvg({ drawable, dimensions, contextToDraw });
             return;
         }
-        contextToDraw.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+        // Handle replaced elements (img, canvas) with object-fit support
+        if (node instanceof HTMLImageElement || node instanceof HTMLCanvasElement) {
+            try {
+                drawReplacedElement({
+                    drawable: node,
+                    dimensions,
+                    computedStyle,
+                    contextToDraw,
+                });
+            }
+            catch (err) {
+                if (node instanceof HTMLImageElement) {
+                    const readableError = getReadableImageError(err, node);
+                    if (readableError) {
+                        throw readableError;
+                    }
+                }
+                throw err;
+            }
+        }
     };
     return domDrawFn;
 };

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

@@ -1,12 +1,11 @@
 import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
 export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
-export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     offsetLeft: number;
     offsetTop: number;
     logLevel: LogLevel;
-    parentRect: DOMRect;
 }) => Promise<DrawElementToCanvasReturnValue>;

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

@@ -1,9 +1,11 @@
+import { Internals } from 'remotion';
+import { compose } from '../compose';
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
-import { handle3dTransform } from './handle-3d-transform';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }) => {
-    const transforms = calculateTransforms({ element, offsetLeft, offsetTop });
-    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
+import { transformIn3d } from './transform-in-3d';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
         return 'continue';
@@ -13,14 +15,40 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        await handle3dTransform({
+        const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
+        const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
+        const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
+        const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
+        const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
+        const start = Date.now();
+        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+        const context2 = tempCanvas.getContext('2d');
+        if (!context2) {
+            throw new Error('Could not get context');
+        }
+        await compose({
             element,
-            totalMatrix,
-            parentRect,
-            context,
+            context: context2,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
             logLevel,
         });
+        const afterCompose = Date.now();
+        const transformed = transformIn3d({
+            canvasWidth: tempCanvasWidth,
+            canvasHeight: tempCanvasHeight,
+            matrix: totalMatrix,
+            sourceCanvas: tempCanvas,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
+        });
+        context.drawImage(transformed, 0, 0);
+        const afterDraw = Date.now();
         reset();
+        Internals.Log.trace({
+            logLevel,
+            tag: '@remotion/web-renderer',
+        }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
         return 'skip-children';
     }
     await drawElement({

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

@@ -1,6 +1,7 @@
 import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
 import type { DrawFn } from './drawn-fn';
-export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }: {
+export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, element, internalState, }: {
     rect: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
@@ -9,6 +10,8 @@ export declare const drawElement: ({ rect, computedStyle, context, draw, opacity
     draw: DrawFn;
     parentRect: DOMRect;
     logLevel: LogLevel;
+    element: HTMLElement | SVGElement;
+    internalState: InternalState;
 }) => Promise<{
     cleanupAfterChildren: () => void;
 }>;

package/dist/drawing/draw-element.js

@@ -1,14 +1,13 @@
 import { parseBorderRadius, setBorderRadius } from './border-radius';
+import { drawBackground } from './draw-background';
 import { drawBorder } from './draw-border';
-import { setBoxShadow } from './draw-box-shadow';
+import { drawBorderRadius } from './draw-box-shadow';
 import { drawOutline } from './draw-outline';
 import { setOpacity } from './opacity';
 import { setOverflowHidden } from './overflow';
-import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
 import { setTransform } from './transform';
-export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }) => {
-    const background = computedStyle.backgroundColor;
-    const { backgroundImage } = computedStyle;
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, element, internalState, }) => {
+    const { backgroundImage, backgroundColor, backgroundClip } = computedStyle;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
         width: rect.width,
@@ -24,7 +23,7 @@ export const drawElement = async ({ rect, computedStyle, context, draw, opacity,
         opacity,
     });
     // Draw box shadow before border radius clip and background
-    setBoxShadow({
+    drawBorderRadius({
         ctx: context,
         computedStyle,
         rect,
@@ -36,43 +35,28 @@ export const drawElement = async ({ rect, computedStyle, context, draw, opacity,
         rect,
         borderRadius,
         forceClipEvenWhenZero: false,
+        computedStyle,
+        backgroundClip,
+    });
+    await drawBackground({
+        backgroundImage,
+        context,
+        rect,
+        backgroundColor,
+        backgroundClip,
+        element,
+        logLevel,
+        internalState,
+        computedStyle,
     });
-    // Try to draw linear gradient first
-    let gradientDrawn = false;
-    if (backgroundImage && backgroundImage !== 'none') {
-        const gradientInfo = parseLinearGradient(backgroundImage);
-        if (gradientInfo) {
-            const gradient = createCanvasGradient({
-                ctx: context,
-                rect,
-                gradientInfo,
-            });
-            const originalFillStyle = context.fillStyle;
-            context.fillStyle = gradient;
-            context.fillRect(rect.left, rect.top, rect.width, rect.height);
-            context.fillStyle = originalFillStyle;
-            gradientDrawn = true;
-        }
-    }
-    // Fallback to solid background color if no gradient was drawn
-    if (!gradientDrawn &&
-        background &&
-        background !== 'transparent' &&
-        !(background.startsWith('rgba') &&
-            (background.endsWith(', 0)') || background.endsWith(',0')))) {
-        const originalFillStyle = context.fillStyle;
-        context.fillStyle = background;
-        context.fillRect(rect.left, rect.top, rect.width, rect.height);
-        context.fillStyle = originalFillStyle;
-    }
     await draw({ dimensions: rect, computedStyle, contextToDraw: context });
+    finishBorderRadius();
     drawBorder({
         ctx: context,
         rect,
         borderRadius,
         computedStyle,
     });
-    finishBorderRadius();
     // Drawing outline ignores overflow: hidden, finishing it and starting a new one for the outline
     drawOutline({
         ctx: context,
@@ -85,6 +69,8 @@ export const drawElement = async ({ rect, computedStyle, context, draw, opacity,
         rect,
         borderRadius,
         overflowHidden: computedStyle.overflow === 'hidden',
+        computedStyle,
+        backgroundClip,
     });
     finishTransform();
     return {

package/dist/drawing/fit-svg-into-its-dimensions.d.ts

@@ -0,0 +1,12 @@
+export declare const fitSvgIntoItsContainer: ({ containerSize, elementSize, }: {
+    containerSize: DOMRect;
+    elementSize: {
+        width: number;
+        height: number;
+    };
+}) => {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};

package/dist/drawing/fit-svg-into-its-dimensions.js

@@ -0,0 +1,35 @@
+// The bitmap created from the SVG height and width might not be what we expect.
+// Adjust the dimensions
+export const fitSvgIntoItsContainer = ({ containerSize, elementSize, }) => {
+    // If was already fitting, no need to calculate and lose precision
+    if (Math.round(containerSize.width) === Math.round(elementSize.width) &&
+        Math.round(containerSize.height) === Math.round(elementSize.height)) {
+        return {
+            width: containerSize.width,
+            height: containerSize.height,
+            top: containerSize.top,
+            left: containerSize.left,
+        };
+    }
+    if (containerSize.width <= 0 || containerSize.height <= 0) {
+        throw new Error(`Container must have positive dimensions, but got ${containerSize.width}x${containerSize.height}`);
+    }
+    if (elementSize.width <= 0 || elementSize.height <= 0) {
+        throw new Error(`Element must have positive dimensions, but got ${elementSize.width}x${elementSize.height}`);
+    }
+    const heightRatio = containerSize.height / elementSize.height;
+    const widthRatio = containerSize.width / elementSize.width;
+    const ratio = Math.min(heightRatio, widthRatio);
+    const newWidth = elementSize.width * ratio;
+    const newHeight = elementSize.height * ratio;
+    if (newWidth > containerSize.width + 0.000001 ||
+        newHeight > containerSize.height + 0.000001) {
+        throw new Error(`Element is too big to fit into the container. Max size: ${containerSize.width}x${containerSize.height}, element size: ${newWidth}x${newHeight}`);
+    }
+    return {
+        width: newWidth,
+        height: newHeight,
+        top: (containerSize.height - newHeight) / 2 + containerSize.top,
+        left: (containerSize.width - newWidth) / 2 + containerSize.left,
+    };
+};

package/dist/drawing/get-clipped-background.d.ts

@@ -0,0 +1,8 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const getClippedBackground: ({ element, boundingRect, logLevel, internalState, }: {
+    element: HTMLElement | SVGElement;
+    boundingRect: DOMRect;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/drawing/get-clipped-background.js

@@ -0,0 +1,14 @@
+import { compose } from '../compose';
+export const getClippedBackground = async ({ element, boundingRect, logLevel, internalState, }) => {
+    const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+    const tempContext = tempCanvas.getContext('2d');
+    await compose({
+        element,
+        context: tempContext,
+        logLevel,
+        parentRect: boundingRect,
+        internalState,
+        onlyBackgroundClip: true,
+    });
+    return tempContext;
+};

package/dist/drawing/get-padding-box.d.ts

@@ -0,0 +1 @@
+export declare const getBoxBasedOnBackgroundClip: (rect: DOMRect, computedStyle: CSSStyleDeclaration, backgroundClip: string | undefined) => DOMRect;

package/dist/drawing/get-padding-box.js

@@ -0,0 +1,30 @@
+const getPaddingBox = (rect, computedStyle) => {
+    const borderLeft = parseFloat(computedStyle.borderLeftWidth);
+    const borderRight = parseFloat(computedStyle.borderRightWidth);
+    const borderTop = parseFloat(computedStyle.borderTopWidth);
+    const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+    return new DOMRect(rect.left + borderLeft, rect.top + borderTop, rect.width - borderLeft - borderRight, rect.height - borderTop - borderBottom);
+};
+const getContentBox = (rect, computedStyle) => {
+    const paddingBox = getPaddingBox(rect, computedStyle);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft);
+    const paddingRight = parseFloat(computedStyle.paddingRight);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+    return new DOMRect(paddingBox.left + paddingLeft, paddingBox.top + paddingTop, paddingBox.width - paddingLeft - paddingRight, paddingBox.height - paddingTop - paddingBottom);
+};
+export const getBoxBasedOnBackgroundClip = (rect, computedStyle, backgroundClip) => {
+    if (!backgroundClip) {
+        return rect;
+    }
+    if (backgroundClip.includes('text')) {
+        return rect;
+    }
+    if (backgroundClip.includes('padding-box')) {
+        return getPaddingBox(rect, computedStyle);
+    }
+    if (backgroundClip.includes('content-box')) {
+        return getContentBox(rect, computedStyle);
+    }
+    return rect;
+};

package/dist/drawing/get-pretransform-rect.js

@@ -1,3 +1,7 @@
+// In some cases, we get a matrix that is too compressed:
+// e.g. https://github.com/remotion-dev/remotion/issues/6185
+// > You're rotating around the X-axis by ~89.96°, which means the Y-axis gets compressed to ⁠cos(89.96°) ≈ 0.000691 of its original size in the viewport.
+const MAX_SCALE_FACTOR = 100;
 export function getPreTransformRect(targetRect, matrix) {
     // 1. Determine the effective 2D transformation by transforming basis vectors
     const origin = new DOMPoint(0, 0).matrixTransform(matrix);
@@ -6,6 +10,15 @@ export function getPreTransformRect(targetRect, matrix) {
     // 2. Compute the 2D basis vectors after transformation
     const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
     const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+    // Check effective scale in each axis
+    const scaleX = Math.hypot(basisX.x, basisX.y);
+    const scaleY = Math.hypot(basisY.x, basisY.y);
+    // If either axis is too compressed, the inverse will explode
+    const minScale = Math.min(scaleX, scaleY);
+    if (minScale < 1 / MAX_SCALE_FACTOR) {
+        // Content is nearly invisible, e.g. 89.96deg X rotation (edge-on view)
+        return new DOMRect(0, 0, 0, 0);
+    }
     // 3. Build the effective 2D matrix and invert it
     const effective2D = new DOMMatrix([
         basisX.x,

package/dist/drawing/go-rects-intersect.d.ts

@@ -0,0 +1 @@
+export declare function doRectsIntersect(rect1: DOMRect, rect2: DOMRect): boolean;

package/dist/drawing/go-rects-intersect.js

@@ -0,0 +1,6 @@
+export function doRectsIntersect(rect1, rect2) {
+    return !(rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom);
+}

package/dist/drawing/handle-3d-transform.d.ts

@@ -1,11 +1,13 @@
+import type { InternalState } from '../internal-state';
 export declare const getPrecomposeRectFor3DTransform: ({ element, parentRect, matrix, }: {
     element: HTMLElement | SVGElement;
     parentRect: DOMRect;
     matrix: DOMMatrix;
 }) => DOMRect;
-export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, }: {
+export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }: {
     matrix: DOMMatrix;
     precomposeRect: DOMRect;
     tempCanvas: OffscreenCanvas;
     rectAfterTransforms: DOMRect;
-}) => readonly [OffscreenCanvas, () => void] | null;
+    internalState: InternalState;
+}) => OffscreenCanvas | null;

package/dist/drawing/handle-3d-transform.js

@@ -11,15 +11,16 @@ export const getPrecomposeRectFor3DTransform = ({ element, parentRect, matrix, }
     });
     return preTransformRect;
 };
-export const handle3dTransform = ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, }) => {
-    const { canvas: transformed, rect: transformedRect, cleanup, } = transformIn3d({
+export const handle3dTransform = ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }) => {
+    const { canvas: transformed, rect: transformedRect } = transformIn3d({
         untransformedRect: precomposeRect,
         matrix,
         sourceCanvas: tempCanvas,
         rectAfterTransforms,
+        internalState,
     });
     if (transformedRect.width <= 0 || transformedRect.height <= 0) {
         return null;
     }
-    return [transformed, cleanup];
+    return transformed;
 };

package/dist/drawing/handle-mask.js

@@ -12,6 +12,8 @@ export const handleMask = ({ gradientInfo, rect, precomposeRect, tempContext, })
         ctx: tempContext,
         rect: rectToFill,
         gradientInfo,
+        offsetLeft: 0,
+        offsetTop: 0,
     });
     tempContext.globalCompositeOperation = 'destination-in';
     tempContext.fillStyle = gradient;

package/dist/drawing/overflow.d.ts

@@ -1,7 +1,9 @@
 import type { BorderRadiusCorners } from './border-radius';
-export declare const setOverflowHidden: ({ ctx, rect, borderRadius, overflowHidden, }: {
+export declare const setOverflowHidden: ({ ctx, rect, borderRadius, overflowHidden, computedStyle, backgroundClip, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     overflowHidden: boolean;
+    computedStyle: CSSStyleDeclaration;
+    backgroundClip: string;
 }) => () => void;

package/dist/drawing/overflow.js

@@ -1,5 +1,5 @@
 import { setBorderRadius } from './border-radius';
-export const setOverflowHidden = ({ ctx, rect, borderRadius, overflowHidden, }) => {
+export const setOverflowHidden = ({ ctx, rect, borderRadius, overflowHidden, computedStyle, backgroundClip, }) => {
     if (!overflowHidden) {
         return () => { };
     }
@@ -8,5 +8,7 @@ export const setOverflowHidden = ({ ctx, rect, borderRadius, overflowHidden, })
         rect,
         borderRadius,
         forceClipEvenWhenZero: true,
+        computedStyle,
+        backgroundClip,
     });
 };

package/dist/drawing/parse-linear-gradient.d.ts

@@ -7,8 +7,10 @@ export interface LinearGradientInfo {
     colorStops: ColorStop[];
 }
 export declare const parseLinearGradient: (backgroundImage: string) => LinearGradientInfo | null;
-export declare const createCanvasGradient: ({ ctx, rect, gradientInfo, }: {
+export declare const createCanvasGradient: ({ ctx, rect, gradientInfo, offsetLeft, offsetTop, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     gradientInfo: LinearGradientInfo;
+    offsetLeft: number;
+    offsetTop: number;
 }) => CanvasGradient;

package/dist/drawing/parse-linear-gradient.js

@@ -226,13 +226,13 @@ export const parseLinearGradient = (backgroundImage) => {
         colorStops,
     };
 };
-export const createCanvasGradient = ({ ctx, rect, gradientInfo, }) => {
+export const createCanvasGradient = ({ ctx, rect, gradientInfo, offsetLeft, offsetTop, }) => {
     // Convert angle to radians
     // CSS angles: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left
     // We need to calculate the gradient line that spans the rectangle at the given angle
     const angleRad = ((gradientInfo.angle - 90) * Math.PI) / 180;
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
+    const centerX = rect.left - offsetLeft + rect.width / 2;
+    const centerY = rect.top - offsetTop + rect.height / 2;
     // Calculate gradient line endpoints
     // The gradient line passes through the center and has the specified angle
     const cos = Math.cos(angleRad);

package/dist/drawing/precompose.js

@@ -8,6 +8,7 @@ export const precomposeDOMElement = async ({ boundingRect, element, logLevel, in
         logLevel,
         parentRect: boundingRect,
         internalState,
+        onlyBackgroundClip: false,
     });
     return { tempCanvas, tempContext };
 };

package/dist/drawing/process-node.js

@@ -57,7 +57,6 @@ export const processNode = async ({ element, context, draw, logLevel, parentRect
             internalState,
         });
         let drawable = tempCanvas;
-        let cleanupWebGL = () => { };
         const rectAfterTransforms = roundToExpandRect(transformDOMRect({
             rect: precomposeRect,
             matrix: totalMatrix,
@@ -76,17 +75,16 @@ export const processNode = async ({ element, context, draw, logLevel, parentRect
                 precomposeRect,
                 tempCanvas: drawable,
                 rectAfterTransforms,
+                internalState,
             });
             if (t) {
-                const [transformed, cleanup] = t;
-                drawable = transformed;
-                cleanupWebGL = cleanup;
+                drawable = t;
             }
         }
         const previousTransform = context.getTransform();
         if (drawable) {
             context.setTransform(new DOMMatrix());
-            context.drawImage(drawable, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+            context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
             context.setTransform(previousTransform);
             Internals.Log.trace({
                 logLevel,
@@ -98,7 +96,6 @@ export const processNode = async ({ element, context, draw, logLevel, parentRect
             });
         }
         reset();
-        cleanupWebGL();
         return { type: 'skip-children' };
     }
     const { cleanupAfterChildren } = await drawElement({
@@ -110,6 +107,8 @@ export const processNode = async ({ element, context, draw, logLevel, parentRect
         totalMatrix,
         parentRect,
         logLevel,
+        element,
+        internalState,
     });
     reset();
     return { type: 'continue', cleanupAfterChildren };

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

@@ -1,6 +1,7 @@
 import type { LogLevel } from 'remotion';
 import type { DrawFn } from '../drawn-fn';
-export declare const drawText: ({ span, logLevel, }: {
+export declare const drawText: ({ span, logLevel, onlyBackgroundClip, }: {
     span: HTMLSpanElement;
     logLevel: LogLevel;
+    onlyBackgroundClip: boolean;
 }) => DrawFn;

package/dist/drawing/text/draw-text.js

@@ -2,9 +2,9 @@ import { Internals } from 'remotion';
 import { applyTextTransform } from './apply-text-transform';
 import { findLineBreaks } from './find-line-breaks.text';
 import { getCollapsedText } from './get-collapsed-text';
-export const drawText = ({ span, logLevel, }) => {
+export const drawText = ({ span, logLevel, onlyBackgroundClip, }) => {
     const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
-        const { fontFamily, fontSize, fontWeight, color, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
+        const { fontFamily, fontSize, fontWeight, direction, writingMode, letterSpacing, textTransform, webkitTextFillColor, } = computedStyle;
         const isVertical = writingMode !== 'horizontal-tb';
         if (isVertical) {
             // TODO: Only warn once per render.
@@ -17,7 +17,13 @@ export const drawText = ({ span, logLevel, }) => {
         contextToDraw.save();
         const fontSizePx = parseFloat(fontSize);
         contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
-        contextToDraw.fillStyle = color;
+        contextToDraw.fillStyle =
+            // If text is being applied with backgroundClipText, we need to use a solid color otherwise it won't get
+            // applied in canvas
+            onlyBackgroundClip
+                ? 'black'
+                : // -webkit-text-fill-color overrides color, and defaults to the value of `color`
+                    webkitTextFillColor;
         contextToDraw.letterSpacing = letterSpacing;
         const isRTL = direction === 'rtl';
         contextToDraw.textAlign = isRTL ? 'right' : 'left';

package/dist/drawing/text/get-base-height.d.ts

@@ -0,0 +1 @@
+export declare const getOpticalHeight: (span: HTMLSpanElement) => number;

package/dist/drawing/text/get-base-height.js

@@ -0,0 +1,13 @@
+// A text with e.g. font-size: 12px does not always get rendered with 12px
+// With "Arial", it gets rendered with 13.5px height, with SF Pro, it gets
+// rendered with 14px height. I therefore conclude there is no logic
+// and we need to measure it. I rendered the string "1", "a" and "qË" and
+// they all have the same height, so it doesn't matter if certain characters
+// go low or high.
+export const getOpticalHeight = (span) => {
+    const originalText = span.textContent;
+    span.textContent = '1';
+    const { height } = span.getBoundingClientRect();
+    span.textContent = originalText;
+    return height;
+};