@remotion/web-renderer 4.0.396 → 4.0.398

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

@@ -1,39 +1,25 @@
-import { Internals } from 'remotion';
-import { compose } from '../compose';
 import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
 import { getNarrowerRect } from './clamp-rect-to-parent-bounds';
 import { getPreTransformRect } from './get-pretransform-rect';
 import { transformIn3d } from './transform-in-3d';
-export const handle3dTransform = async ({ element, matrix, parentRect, context, logLevel, internalState, }) => {
+export const getPrecomposeRectFor3DTransform = ({ element, parentRect, matrix, }) => {
     const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
     const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
     const preTransformRect = getNarrowerRect({
         firstRect: unclampedBiggestBoundingClientRect,
         secondRect: biggestPossiblePretransformRect,
     });
-    const start = Date.now();
-    const tempCanvas = new OffscreenCanvas(Math.ceil(preTransformRect.width), Math.ceil(preTransformRect.height));
-    await compose({
-        element,
-        context: tempCanvas.getContext('2d'),
-        logLevel,
-        parentRect: preTransformRect,
-        internalState,
-    });
-    const afterCompose = Date.now();
-    const { canvas: transformed, rect: transformedRect } = transformIn3d({
-        untransformedRect: preTransformRect,
+    return preTransformRect;
+};
+export const handle3dTransform = ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, }) => {
+    const { canvas: transformed, rect: transformedRect, cleanup, } = transformIn3d({
+        untransformedRect: precomposeRect,
         matrix,
         sourceCanvas: tempCanvas,
+        rectAfterTransforms,
     });
-    context.drawImage(transformed, transformedRect.x, transformedRect.y);
-    const afterDraw = Date.now();
-    Internals.Log.trace({
-        logLevel,
-        tag: '@remotion/web-renderer',
-    }, `Transforming element in 3D - canvas size: ${transformedRect.width}x${transformedRect.height} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
-    internalState.add3DTransform({
-        canvasWidth: Math.ceil(transformedRect.width),
-        canvasHeight: Math.ceil(transformedRect.height),
-    });
+    if (transformedRect.width <= 0 || transformedRect.height <= 0) {
+        return null;
+    }
+    return [transformed, cleanup];
 };

package/dist/drawing/handle-mask.d.ts

@@ -0,0 +1,8 @@
+import type { LinearGradientInfo } from './parse-linear-gradient';
+export declare const getPrecomposeRectForMask: (element: HTMLElement | SVGElement) => DOMRect;
+export declare const handleMask: ({ gradientInfo, rect, precomposeRect, tempContext, }: {
+    gradientInfo: LinearGradientInfo;
+    rect: DOMRect;
+    precomposeRect: DOMRect;
+    tempContext: OffscreenCanvasRenderingContext2D;
+}) => void;

package/dist/drawing/handle-mask.js

@@ -0,0 +1,19 @@
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { createCanvasGradient } from './parse-linear-gradient';
+export const getPrecomposeRectForMask = (element) => {
+    const boundingRect = getBiggestBoundingClientRect(element);
+    return boundingRect;
+};
+export const handleMask = ({ gradientInfo, rect, precomposeRect, tempContext, }) => {
+    const rectOffsetX = rect.left - precomposeRect.left;
+    const rectOffsetY = rect.top - precomposeRect.top;
+    const rectToFill = new DOMRect(rectOffsetX, rectOffsetY, rect.width, rect.height);
+    const gradient = createCanvasGradient({
+        ctx: tempContext,
+        rect: rectToFill,
+        gradientInfo,
+    });
+    tempContext.globalCompositeOperation = 'destination-in';
+    tempContext.fillStyle = gradient;
+    tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+};

package/dist/drawing/mask-image.d.ts

@@ -0,0 +1,3 @@
+import type { LinearGradientInfo } from './parse-linear-gradient';
+export declare const getMaskImageValue: (computedStyle: CSSStyleDeclaration) => string | null;
+export declare const parseMaskImage: (maskImageValue: string) => LinearGradientInfo | null;

package/dist/drawing/mask-image.js

@@ -0,0 +1,14 @@
+import { parseLinearGradient } from './parse-linear-gradient';
+export const getMaskImageValue = (computedStyle) => {
+    // Check both standard and webkit-prefixed properties
+    const { maskImage, webkitMaskImage } = computedStyle;
+    const value = maskImage || webkitMaskImage;
+    if (!value || value === 'none') {
+        return null;
+    }
+    return value;
+};
+export const parseMaskImage = (maskImageValue) => {
+    // Only linear gradients are supported for now
+    return parseLinearGradient(maskImageValue);
+};

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

@@ -0,0 +1,14 @@
+export interface ColorStop {
+    color: string;
+    position: number;
+}
+export interface LinearGradientInfo {
+    angle: number;
+    colorStops: ColorStop[];
+}
+export declare const parseLinearGradient: (backgroundImage: string) => LinearGradientInfo | null;
+export declare const createCanvasGradient: ({ ctx, rect, gradientInfo, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    gradientInfo: LinearGradientInfo;
+}) => CanvasGradient;

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

@@ -0,0 +1,260 @@
+import { NoReactInternals } from 'remotion/no-react';
+const isValidColor = (color) => {
+    try {
+        const result = NoReactInternals.processColor(color);
+        return result !== null && result !== undefined;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const parseDirection = (directionStr) => {
+    const trimmed = directionStr.trim().toLowerCase();
+    // Handle keywords like "to right", "to bottom", etc.
+    if (trimmed.startsWith('to ')) {
+        const direction = trimmed.substring(3).trim();
+        switch (direction) {
+            case 'top':
+                return 0;
+            case 'right':
+                return 90;
+            case 'bottom':
+                return 180;
+            case 'left':
+                return 270;
+            case 'top right':
+            case 'right top':
+                return 45;
+            case 'bottom right':
+            case 'right bottom':
+                return 135;
+            case 'bottom left':
+            case 'left bottom':
+                return 225;
+            case 'top left':
+            case 'left top':
+                return 315;
+            default:
+                return 180; // Default to bottom
+        }
+    }
+    // Handle angle values: deg, rad, grad, turn
+    const angleMatch = trimmed.match(/^(-?\d+\.?\d*)(deg|rad|grad|turn)$/);
+    if (angleMatch) {
+        const value = parseFloat(angleMatch[1]);
+        const unit = angleMatch[2];
+        switch (unit) {
+            case 'deg':
+                return value;
+            case 'rad':
+                return (value * 180) / Math.PI;
+            case 'grad':
+                return (value * 360) / 400;
+            case 'turn':
+                return value * 360;
+            default:
+                return value;
+        }
+    }
+    // Default: to bottom
+    return 180;
+};
+const parseColorStops = (colorStopsStr) => {
+    // Split by comma, but respect parentheses in rgba(), rgb(), hsl(), hsla()
+    const parts = colorStopsStr.split(/,(?![^(]*\))/);
+    const stops = [];
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        // Extract color: can be rgb(), rgba(), hsl(), hsla(), hex, or named color
+        const colorMatch = trimmed.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+        if (!colorMatch) {
+            continue;
+        }
+        const colorStr = colorMatch[0];
+        // Validate that this is actually a valid CSS color
+        if (!isValidColor(colorStr)) {
+            continue;
+        }
+        const remaining = trimmed
+            .substring(colorMatch.index + colorStr.length)
+            .trim();
+        // Canvas API supports CSS colors directly, so we can use the color string as-is
+        const normalizedColor = colorStr;
+        // Parse position if provided
+        let position = null;
+        if (remaining) {
+            const posMatch = remaining.match(/(-?\d+\.?\d*)(%|px)?/);
+            if (posMatch) {
+                const value = parseFloat(posMatch[1]);
+                const unit = posMatch[2];
+                if (unit === '%') {
+                    position = value / 100;
+                }
+                else if (unit === 'px') {
+                    // px values need element dimensions, which we don't have here
+                    // We'll handle this as a percentage for now (not fully CSS-compliant but good enough)
+                    position = null;
+                }
+                else {
+                    position = value / 100; // Assume percentage if no unit
+                }
+            }
+        }
+        stops.push({
+            color: normalizedColor,
+            position: position !== null ? position : -1, // -1 means needs to be calculated
+        });
+    }
+    if (stops.length === 0) {
+        return null;
+    }
+    // Distribute positions evenly for stops that don't have explicit positions
+    let lastExplicitIndex = -1;
+    let lastExplicitPosition = 0;
+    for (let i = 0; i < stops.length; i++) {
+        if (stops[i].position !== -1) {
+            // Found an explicit position
+            if (lastExplicitIndex >= 0) {
+                // Interpolate between last explicit and current explicit
+                const numImplicit = i - lastExplicitIndex - 1;
+                if (numImplicit > 0) {
+                    const step = (stops[i].position - lastExplicitPosition) / (numImplicit + 1);
+                    for (let j = lastExplicitIndex + 1; j < i; j++) {
+                        stops[j].position =
+                            lastExplicitPosition + step * (j - lastExplicitIndex);
+                    }
+                }
+            }
+            else {
+                // Backfill from start to first explicit
+                const numImplicit = i;
+                if (numImplicit > 0) {
+                    const step = stops[i].position / (numImplicit + 1);
+                    for (let j = 0; j < i; j++) {
+                        stops[j].position = step * (j + 1);
+                    }
+                }
+            }
+            lastExplicitIndex = i;
+            lastExplicitPosition = stops[i].position;
+        }
+    }
+    // If no explicit positions were provided at all, distribute evenly
+    // Check this BEFORE handling trailing stops
+    if (stops.every((s) => s.position === -1)) {
+        if (stops.length === 1) {
+            stops[0].position = 0.5;
+        }
+        else {
+            for (let i = 0; i < stops.length; i++) {
+                stops[i].position = i / (stops.length - 1);
+            }
+        }
+    }
+    else if (lastExplicitIndex < stops.length - 1) {
+        const numImplicit = stops.length - 1 - lastExplicitIndex;
+        const step = (1 - lastExplicitPosition) / (numImplicit + 1);
+        for (let i = lastExplicitIndex + 1; i < stops.length; i++) {
+            stops[i].position = lastExplicitPosition + step * (i - lastExplicitIndex);
+        }
+    }
+    // Clamp positions to 0-1
+    for (const stop of stops) {
+        stop.position = Math.max(0, Math.min(1, stop.position));
+    }
+    return stops;
+};
+const extractGradientContent = (backgroundImage) => {
+    const prefix = 'linear-gradient(';
+    const startIndex = backgroundImage.toLowerCase().indexOf(prefix);
+    if (startIndex === -1) {
+        return null;
+    }
+    // Find matching closing parenthesis, handling nested parens from rgb(), rgba(), etc.
+    let depth = 0;
+    const contentStart = startIndex + prefix.length;
+    for (let i = contentStart; i < backgroundImage.length; i++) {
+        const char = backgroundImage[i];
+        if (char === '(') {
+            depth++;
+        }
+        else if (char === ')') {
+            if (depth === 0) {
+                return backgroundImage.substring(contentStart, i).trim();
+            }
+            depth--;
+        }
+    }
+    return null;
+};
+export const parseLinearGradient = (backgroundImage) => {
+    if (!backgroundImage || backgroundImage === 'none') {
+        return null;
+    }
+    const content = extractGradientContent(backgroundImage);
+    if (!content) {
+        return null;
+    }
+    // Try to identify the direction/angle part vs color stops
+    // Direction/angle is optional and comes first
+    // It can be: "to right", "45deg", etc.
+    // Split into parts, respecting parentheses
+    const parts = content.split(/,(?![^(]*\))/);
+    let angle = 180; // Default: to bottom
+    let colorStopsStart = 0;
+    // Check if first part is a direction/angle
+    if (parts.length > 0) {
+        const firstPart = parts[0].trim();
+        // Check if it looks like a direction or angle (not a color)
+        const isDirection = firstPart.startsWith('to ') ||
+            /^-?\d+\.?\d*(deg|rad|grad|turn)$/.test(firstPart);
+        if (isDirection) {
+            angle = parseDirection(firstPart);
+            colorStopsStart = 1;
+        }
+    }
+    // Parse color stops
+    const colorStopsStr = parts.slice(colorStopsStart).join(',');
+    const colorStops = parseColorStops(colorStopsStr);
+    if (!colorStops || colorStops.length === 0) {
+        return null;
+    }
+    return {
+        angle,
+        colorStops,
+    };
+};
+export const createCanvasGradient = ({ ctx, rect, gradientInfo, }) => {
+    // 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;
+    // Calculate gradient line endpoints
+    // The gradient line passes through the center and has the specified angle
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    // Find the intersection of the gradient line with the rectangle edges
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    // Calculate the length from center to edge along the gradient line.
+    // Primary formula should always be > 0 for valid angles and non-zero rects;
+    // fall back to diagonal length only for degenerate or invalid cases.
+    let length = Math.abs(cos) * halfWidth + Math.abs(sin) * halfHeight;
+    if (!Number.isFinite(length) || length === 0) {
+        length = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
+    }
+    const x0 = centerX - cos * length;
+    const y0 = centerY - sin * length;
+    const x1 = centerX + cos * length;
+    const y1 = centerY + sin * length;
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    // Add color stops
+    for (const stop of gradientInfo.colorStops) {
+        gradient.addColorStop(stop.position, stop.color);
+    }
+    return gradient;
+};

package/dist/drawing/precompose.d.ts

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

package/dist/drawing/precompose.js

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

package/dist/drawing/process-node.d.ts

@@ -1,17 +1,18 @@
-import type { LogLevel } from 'remotion';
+import { type LogLevel } from 'remotion';
 import type { InternalState } from '../internal-state';
 import type { DrawFn } from './drawn-fn';
 export type ProcessNodeReturnValue = {
     type: 'continue';
-    cleanupAfterChildren: () => void;
+    cleanupAfterChildren: null | (() => void);
 } | {
     type: 'skip-children';
 };
-export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, }: {
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     logLevel: LogLevel;
     parentRect: DOMRect;
     internalState: InternalState;
+    rootElement: HTMLElement | SVGElement;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/process-node.js

@@ -1,40 +1,115 @@
+import { Internals } from 'remotion';
 import { calculateTransforms } from './calculate-transforms';
+import { getWiderRectAndExpand } from './clamp-rect-to-parent-bounds';
+import { doRectsIntersect } from './do-rects-intersect';
 import { drawElement } from './draw-element';
-import { handle3dTransform } from './handle-3d-transform';
-export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, }) => {
-    const transforms = calculateTransforms({
+import { getPrecomposeRectFor3DTransform, handle3dTransform, } from './handle-3d-transform';
+import { getPrecomposeRectForMask, handleMask } from './handle-mask';
+import { precomposeDOMElement } from './precompose';
+import { roundToExpandRect } from './round-to-expand-rect';
+import { transformDOMRect } from './transform-rect-with-matrix';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, rootElement, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle, precompositing, } = calculateTransforms({
         element,
-        offsetLeft: parentRect.x,
-        offsetTop: parentRect.y,
+        rootElement,
     });
-    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
     if (opacity === 0) {
         reset();
-        return { type: 'continue', cleanupAfterChildren: () => { } };
+        return { type: 'skip-children' };
     }
     if (dimensions.width <= 0 || dimensions.height <= 0) {
         reset();
-        return { type: 'continue', cleanupAfterChildren: () => { } };
+        return { type: 'continue', cleanupAfterChildren: null };
     }
-    if (!totalMatrix.is2D) {
-        await handle3dTransform({
+    const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+    if (precompositing.needsPrecompositing) {
+        const start = Date.now();
+        let precomposeRect = null;
+        if (precompositing.needsMaskImage) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectForMask(element),
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectFor3DTransform({
+                    element,
+                    parentRect,
+                    matrix: totalMatrix,
+                }),
+            });
+        }
+        if (!precomposeRect) {
+            throw new Error('Precompose rect not found');
+        }
+        if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        if (!doRectsIntersect(precomposeRect, parentRect)) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        const { tempCanvas, tempContext } = await precomposeDOMElement({
+            boundingRect: precomposeRect,
             element,
-            matrix: totalMatrix,
-            parentRect,
-            context,
             logLevel,
             internalState,
         });
+        let drawable = tempCanvas;
+        let cleanupWebGL = () => { };
+        const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+            rect: precomposeRect,
+            matrix: totalMatrix,
+        }));
+        if (precompositing.needsMaskImage) {
+            handleMask({
+                gradientInfo: precompositing.needsMaskImage,
+                rect,
+                precomposeRect,
+                tempContext,
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            const t = handle3dTransform({
+                matrix: totalMatrix,
+                precomposeRect,
+                tempCanvas: drawable,
+                rectAfterTransforms,
+            });
+            if (t) {
+                const [transformed, cleanup] = t;
+                drawable = transformed;
+                cleanupWebGL = cleanup;
+            }
+        }
+        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.setTransform(previousTransform);
+            Internals.Log.trace({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
+            internalState.addPrecompose({
+                canvasWidth: precomposeRect.width,
+                canvasHeight: precomposeRect.height,
+            });
+        }
         reset();
+        cleanupWebGL();
         return { type: 'skip-children' };
     }
     const { cleanupAfterChildren } = await drawElement({
-        rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
+        rect,
         computedStyle,
         context,
         draw,
         opacity,
         totalMatrix,
+        parentRect,
+        logLevel,
     });
     reset();
     return { type: 'continue', cleanupAfterChildren };

package/dist/drawing/round-to-expand-rect.d.ts

@@ -0,0 +1 @@
+export declare const roundToExpandRect: (rect: DOMRect) => DOMRect;

package/dist/drawing/round-to-expand-rect.js

@@ -0,0 +1,7 @@
+export const roundToExpandRect = (rect) => {
+    const left = Math.floor(rect.left);
+    const top = Math.floor(rect.top);
+    const right = Math.ceil(rect.right);
+    const bottom = Math.ceil(rect.bottom);
+    return new DOMRect(left, top, right - left, bottom - top);
+};

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

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

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

@@ -2,14 +2,14 @@ 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) => {
+export const drawText = ({ span, logLevel, }) => {
     const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
         const { fontFamily, fontSize, fontWeight, color, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
         const isVertical = writingMode !== 'horizontal-tb';
         if (isVertical) {
             // TODO: Only warn once per render.
             Internals.Log.warn({
-                logLevel: 'warn',
+                logLevel,
                 tag: '@remotion/web-renderer',
             }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
             return;
@@ -30,10 +30,15 @@ export const drawText = (span) => {
         const xPosition = isRTL ? rect.right : rect.left;
         const lines = findLineBreaks(span, isRTL);
         let offsetTop = 0;
-        const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
+        const measurements = contextToDraw.measureText(lines[0].text);
+        const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+        const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
         for (const line of lines) {
-            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
-            offsetTop += line.offsetTop;
+            // Calculate leading
+            const leading = line.height - fontHeight;
+            const halfLeading = leading / 2;
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
+            offsetTop += line.height;
         }
         span.textContent = originalText;
         contextToDraw.restore();

package/dist/drawing/text/find-line-breaks.text.d.ts

@@ -1,5 +1,5 @@
 export declare function findLineBreaks(span: HTMLSpanElement, rtl: boolean): Array<{
     text: string;
-    offsetTop: number;
+    height: number;
     offsetHorizontal: number;
 }>;

package/dist/drawing/text/find-line-breaks.text.js

@@ -37,7 +37,7 @@ export function findLineBreaks(span, rtl) {
             const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
             lines.push({
                 text: shouldCollapse ? currentLine.trim() : currentLine,
-                offsetTop: currentHeight - previousRect.height,
+                height: currentHeight - previousRect.height,
                 offsetHorizontal,
             });
             currentLine = wordsToAdd;
@@ -57,7 +57,7 @@ export function findLineBreaks(span, rtl) {
             : lastRect.left - originalRect.left;
         lines.push({
             text: currentLine,
-            offsetTop: rect.height - previousRect.height,
+            height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
             offsetHorizontal,
         });
     }

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,10 +1,11 @@
 import type { LogLevel } from 'remotion';
 import type { InternalState } from '../../internal-state';
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: LogLevel;
     parentRect: DOMRect;
     internalState: InternalState;
+    rootElement: HTMLElement | SVGElement;
 }) => Promise<ProcessNodeReturnValue>;