@remotion/web-renderer 4.0.394 → 4.0.395

package/dist/compose.d.ts

@@ -1,6 +1,8 @@
-export declare const compose: ({ element, context, offsetLeft, offsetTop, }: {
+import type { LogLevel } from 'remotion';
+export declare const compose: ({ element, context, offsetLeft, offsetTop, logLevel, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     offsetLeft: number;
     offsetTop: number;
+    logLevel: LogLevel;
 }) => Promise<void>;

package/dist/compose.js

@@ -2,7 +2,7 @@ import { drawDomElement } from './drawing/draw-dom-element';
 import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
 import { handleTextNode } from './drawing/text/handle-text-node';
 import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, offsetLeft, offsetTop, }) => {
+const walkOverNode = ({ node, context, offsetLeft, offsetTop, logLevel, }) => {
     if (node instanceof HTMLElement || node instanceof SVGElement) {
         return drawElementToCanvas({
             element: node,
@@ -10,14 +10,15 @@ const walkOverNode = ({ node, context, offsetLeft, offsetTop, }) => {
             draw: drawDomElement(node),
             offsetLeft,
             offsetTop,
+            logLevel,
         });
     }
     if (node instanceof Text) {
-        return handleTextNode({ node, context, offsetLeft, offsetTop });
+        return handleTextNode({ node, context, offsetLeft, offsetTop, logLevel });
     }
     throw new Error('Unknown node type');
 };
-export const compose = async ({ element, context, offsetLeft, offsetTop, }) => {
+export const compose = async ({ element, context, offsetLeft, offsetTop, logLevel, }) => {
     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
@@ -38,6 +39,7 @@ export const compose = async ({ element, context, offsetLeft, offsetTop, }) => {
             context,
             offsetLeft,
             offsetTop,
+            logLevel,
         });
         if (val === 'skip-children') {
             if (!skipToNextNonDescendant(treeWalker)) {

package/dist/drawing/draw-border.js

@@ -1,88 +1,205 @@
-export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
-    const { borderStyle, borderColor, borderWidth: computedBorderWidth, } = computedStyle;
-    // Parse border width (can be shorthand like "1px 2px 3px 4px")
-    const borderWidths = computedBorderWidth
-        .split(/\s+/)
-        .map((w) => parseFloat(w));
-    const borderTop = borderWidths[0] || 0;
-    const borderRight = borderWidths[1] || borderTop;
-    const borderBottom = borderWidths[2] || borderTop;
-    const borderLeft = borderWidths[3] || borderRight;
-    // Check if we have a visible border
-    const hasBorder = borderStyle &&
-        borderStyle !== 'none' &&
-        borderStyle !== 'hidden' &&
-        (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
-    if (!hasBorder) {
+const parseBorderWidth = (value) => {
+    return parseFloat(value) || 0;
+};
+const getBorderSideProperties = (computedStyle) => {
+    // Parse individual border properties for each side
+    // This handles both shorthand (border: "1px solid red") and longhand (border-top-width: "1px") properties
+    return {
+        top: {
+            width: parseBorderWidth(computedStyle.borderTopWidth),
+            color: computedStyle.borderTopColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderTopStyle || computedStyle.borderStyle || 'solid',
+        },
+        right: {
+            width: parseBorderWidth(computedStyle.borderRightWidth),
+            color: computedStyle.borderRightColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderRightStyle || computedStyle.borderStyle || 'solid',
+        },
+        bottom: {
+            width: parseBorderWidth(computedStyle.borderBottomWidth),
+            color: computedStyle.borderBottomColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderBottomStyle || computedStyle.borderStyle || 'solid',
+        },
+        left: {
+            width: parseBorderWidth(computedStyle.borderLeftWidth),
+            color: computedStyle.borderLeftColor || computedStyle.borderColor || 'black',
+            style: computedStyle.borderLeftStyle || computedStyle.borderStyle || 'solid',
+        },
+    };
+};
+const getLineDashPattern = (style, width) => {
+    if (style === 'dashed') {
+        return [width * 2, width];
+    }
+    if (style === 'dotted') {
+        return [width, width];
+    }
+    return [];
+};
+const drawBorderSide = ({ ctx, side, x, y, width, height, borderRadius, borderProperties, }) => {
+    const { width: borderWidth, color, style } = borderProperties;
+    if (borderWidth <= 0 || style === 'none' || style === 'hidden') {
         return;
     }
-    const originalStrokeStyle = ctx.strokeStyle;
-    const originalLineWidth = ctx.lineWidth;
-    const originalLineDash = ctx.getLineDash();
-    ctx.strokeStyle = borderColor;
-    // Set line dash based on border style
-    if (borderStyle === 'dashed') {
-        const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-        ctx.setLineDash([max * 2, max]);
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = borderWidth;
+    ctx.setLineDash(getLineDashPattern(style, borderWidth));
+    const halfWidth = borderWidth / 2;
+    if (side === 'top') {
+        // Start point (accounting for left border and top-left radius)
+        const startX = x + borderRadius.topLeft.horizontal;
+        const startY = y + halfWidth;
+        // End point (accounting for top-right radius)
+        const endX = x + width - borderRadius.topRight.horizontal;
+        const endY = y + halfWidth;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'right') {
+        // Start point (accounting for top border and top-right radius)
+        const startX = x + width - halfWidth;
+        const startY = y + borderRadius.topRight.vertical;
+        // End point (accounting for bottom-right radius)
+        const endX = x + width - halfWidth;
+        const endY = y + height - borderRadius.bottomRight.vertical;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'bottom') {
+        // Start point (accounting for bottom-left radius)
+        const startX = x + borderRadius.bottomLeft.horizontal;
+        const startY = y + height - halfWidth;
+        // End point (accounting for right border and bottom-right radius)
+        const endX = x + width - borderRadius.bottomRight.horizontal;
+        const endY = y + height - halfWidth;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+    }
+    else if (side === 'left') {
+        // Start point (accounting for top-left radius)
+        const startX = x + halfWidth;
+        const startY = y + borderRadius.topLeft.vertical;
+        // End point (accounting for bottom border and bottom-left radius)
+        const endX = x + halfWidth;
+        const endY = y + height - borderRadius.bottomLeft.vertical;
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
     }
-    else if (borderStyle === 'dotted') {
-        ctx.setLineDash([
-            Math.max(borderTop, borderRight, borderBottom, borderLeft),
-        ]);
+    ctx.stroke();
+};
+const drawCorner = ({ ctx, corner, x, y, width, height, borderRadius, topBorder, rightBorder, bottomBorder, leftBorder, }) => {
+    const radius = borderRadius[corner];
+    if (radius.horizontal <= 0 && radius.vertical <= 0) {
+        return;
+    }
+    let border1;
+    let border2;
+    let centerX;
+    let centerY;
+    let startAngle;
+    let endAngle;
+    if (corner === 'topLeft') {
+        border1 = leftBorder;
+        border2 = topBorder;
+        centerX = x + radius.horizontal;
+        centerY = y + radius.vertical;
+        startAngle = Math.PI;
+        endAngle = (Math.PI * 3) / 2;
+    }
+    else if (corner === 'topRight') {
+        border1 = topBorder;
+        border2 = rightBorder;
+        centerX = x + width - radius.horizontal;
+        centerY = y + radius.vertical;
+        startAngle = -Math.PI / 2;
+        endAngle = 0;
+    }
+    else if (corner === 'bottomRight') {
+        border1 = rightBorder;
+        border2 = bottomBorder;
+        centerX = x + width - radius.horizontal;
+        centerY = y + height - radius.vertical;
+        startAngle = 0;
+        endAngle = Math.PI / 2;
     }
     else {
-        ctx.setLineDash([]);
+        // bottomLeft
+        border1 = bottomBorder;
+        border2 = leftBorder;
+        centerX = x + radius.horizontal;
+        centerY = y + height - radius.vertical;
+        startAngle = Math.PI / 2;
+        endAngle = Math.PI;
+    }
+    // Draw corner arc - use the average of the two adjacent borders
+    // In a more sophisticated implementation, we could blend the two borders
+    const avgWidth = (border1.width + border2.width) / 2;
+    const useColor = border1.width >= border2.width ? border1.color : border2.color;
+    const useStyle = border1.width >= border2.width ? border1.style : border2.style;
+    if (avgWidth > 0 && useStyle !== 'none' && useStyle !== 'hidden') {
+        ctx.beginPath();
+        ctx.strokeStyle = useColor;
+        ctx.lineWidth = avgWidth;
+        ctx.setLineDash(getLineDashPattern(useStyle, avgWidth));
+        // Adjust radius for the border width
+        const adjustedRadiusH = Math.max(0, radius.horizontal - avgWidth / 2);
+        const adjustedRadiusV = Math.max(0, radius.vertical - avgWidth / 2);
+        ctx.ellipse(centerX, centerY, adjustedRadiusH, adjustedRadiusV, 0, startAngle, endAngle);
+        ctx.stroke();
     }
-    // For simplicity, use the maximum border width if they differ
-    // A full implementation would draw each side separately
-    const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-    // Create path for border (inset by half the border width to draw inside)
+};
+const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth, borderColor, borderStyle, }) => {
     ctx.beginPath();
-    const borderX = x + maxBorderWidth / 2;
-    const borderY = y + maxBorderWidth / 2;
-    const borderWidth = width - maxBorderWidth;
-    const borderHeight = height - maxBorderWidth;
-    // Account for border radius, adjusted for the border width
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = borderWidth;
+    ctx.setLineDash(getLineDashPattern(borderStyle, borderWidth));
+    const halfWidth = borderWidth / 2;
+    const borderX = x + halfWidth;
+    const borderY = y + halfWidth;
+    const borderW = width - borderWidth;
+    const borderH = height - borderWidth;
+    // Adjust border radius for the border width
     const adjustedBorderRadius = {
         topLeft: {
-            horizontal: Math.max(0, borderRadius.topLeft.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth),
         },
         topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth),
         },
         bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth),
         },
         bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth),
         },
     };
-    // Draw path with border radius
+    // Draw continuous path with border radius
     ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
     // Top edge
-    ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+    ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
     // Top-right corner
     if (adjustedBorderRadius.topRight.horizontal > 0 ||
         adjustedBorderRadius.topRight.vertical > 0) {
-        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+        ctx.ellipse(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
     }
     // Right edge
-    ctx.lineTo(borderX + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+    ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
     // Bottom-right corner
     if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
         adjustedBorderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+        ctx.ellipse(borderX + borderW - adjustedBorderRadius.bottomRight.horizontal, borderY + borderH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
     }
     // Bottom edge
-    ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight);
+    ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH);
     // Bottom-left corner
     if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
         adjustedBorderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+        ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
     }
     // Left edge
     ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
@@ -92,9 +209,144 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
     }
     ctx.closePath();
-    ctx.lineWidth = maxBorderWidth;
     ctx.stroke();
-    // Restore original values
+};
+export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
+    const borders = getBorderSideProperties(computedStyle);
+    // Check if we have any visible border
+    const hasBorder = borders.top.width > 0 ||
+        borders.right.width > 0 ||
+        borders.bottom.width > 0 ||
+        borders.left.width > 0;
+    if (!hasBorder) {
+        return;
+    }
+    // Save original canvas state
+    const originalStrokeStyle = ctx.strokeStyle;
+    const originalLineWidth = ctx.lineWidth;
+    const originalLineDash = ctx.getLineDash();
+    // Check if all borders are uniform (same width, color, and style)
+    const allSidesEqual = borders.top.width === borders.right.width &&
+        borders.top.width === borders.bottom.width &&
+        borders.top.width === borders.left.width &&
+        borders.top.color === borders.right.color &&
+        borders.top.color === borders.bottom.color &&
+        borders.top.color === borders.left.color &&
+        borders.top.style === borders.right.style &&
+        borders.top.style === borders.bottom.style &&
+        borders.top.style === borders.left.style &&
+        borders.top.width > 0;
+    if (allSidesEqual) {
+        // Draw as a single continuous border for continuous dashing
+        drawUniformBorder({
+            ctx,
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            borderWidth: borders.top.width,
+            borderColor: borders.top.color,
+            borderStyle: borders.top.style,
+        });
+    }
+    else {
+        // Draw corners first (they go underneath the straight edges)
+        drawCorner({
+            ctx,
+            corner: 'topLeft',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'topRight',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'bottomRight',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        drawCorner({
+            ctx,
+            corner: 'bottomLeft',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            topBorder: borders.top,
+            rightBorder: borders.right,
+            bottomBorder: borders.bottom,
+            leftBorder: borders.left,
+        });
+        // Draw each border side
+        drawBorderSide({
+            ctx,
+            side: 'top',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            borderProperties: borders.top,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'right',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            borderProperties: borders.right,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'bottom',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            borderProperties: borders.bottom,
+        });
+        drawBorderSide({
+            ctx,
+            side: 'left',
+            x,
+            y,
+            width,
+            height,
+            borderRadius,
+            borderProperties: borders.left,
+        });
+    }
+    // Restore original canvas state
     ctx.strokeStyle = originalStrokeStyle;
     ctx.lineWidth = originalLineWidth;
     ctx.setLineDash(originalLineDash);

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

@@ -1,9 +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, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     offsetLeft: number;
     offsetTop: number;
+    logLevel: LogLevel;
 }) => Promise<DrawElementToCanvasReturnValue>;

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

@@ -1,8 +1,10 @@
+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 { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, }) => {
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
     const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
@@ -13,10 +15,12 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const canvasOffsetLeft = Math.min(dimensions.left, 0);
-        const canvasOffsetTop = Math.min(dimensions.top, 0);
-        const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
-        const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+        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) {
@@ -27,7 +31,9 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
             context: context2,
             offsetLeft: canvasOffsetLeft,
             offsetTop: canvasOffsetTop,
+            logLevel,
         });
+        const afterCompose = Date.now();
         const transformed = transformIn3d({
             canvasWidth: tempCanvasWidth,
             canvasHeight: tempCanvasHeight,
@@ -37,7 +43,12 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
             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/text/draw-text.js

@@ -4,7 +4,7 @@ import { findLineBreaks } from './find-line-breaks.text';
 import { getCollapsedText } from './get-collapsed-text';
 export const drawText = (span) => {
     const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
-        const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
+        const { fontFamily, fontSize, fontWeight, color, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
         const isVertical = writingMode !== 'horizontal-tb';
         if (isVertical) {
             // TODO: Only warn once per render.
@@ -15,16 +15,13 @@ export const drawText = (span) => {
             return;
         }
         contextToDraw.save();
-        contextToDraw.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+        const fontSizePx = parseFloat(fontSize);
+        contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
         contextToDraw.fillStyle = color;
         contextToDraw.letterSpacing = letterSpacing;
-        const fontSizePx = parseFloat(fontSize);
-        // TODO: This is not necessarily correct, need to create text and measure to know for sure
-        const lineHeightPx = lineHeight === 'normal' ? 1.2 * fontSizePx : parseFloat(lineHeight);
-        const baselineOffset = (lineHeightPx - fontSizePx) / 2;
         const isRTL = direction === 'rtl';
         contextToDraw.textAlign = isRTL ? 'right' : 'left';
-        contextToDraw.textBaseline = 'top';
+        contextToDraw.textBaseline = 'alphabetic';
         const originalText = span.textContent;
         const collapsedText = getCollapsedText(span);
         const transformedText = applyTextTransform(collapsedText, textTransform);
@@ -33,8 +30,9 @@ 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);
         for (const line of lines) {
-            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
             offsetTop += line.offsetTop;
         }
         span.textContent = originalText;

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;
+};

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

@@ -1,7 +1,9 @@
+import type { LogLevel } from 'remotion';
 import type { DrawElementToCanvasReturnValue } from '../draw-element-to-canvas';
-export declare const handleTextNode: ({ node, context, offsetLeft, offsetTop, }: {
+export declare const handleTextNode: ({ node, context, offsetLeft, offsetTop, logLevel, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     offsetLeft: number;
     offsetTop: number;
+    logLevel: LogLevel;
 }) => Promise<DrawElementToCanvasReturnValue>;

package/dist/drawing/text/handle-text-node.js

@@ -1,6 +1,6 @@
 import { drawElementToCanvas } from '../draw-element-to-canvas';
 import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, }) => {
+export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, logLevel, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -14,6 +14,7 @@ export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, })
         draw: drawText(span),
         offsetLeft,
         offsetTop,
+        logLevel,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);

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

@@ -22,6 +22,12 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
         helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
         return helperCanvas;
     }
+    if (helperCanvas) {
+        helperCanvas.gl.deleteProgram(helperCanvas.program);
+        helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
+        helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
+        helperCanvas = null;
+    }
     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
     const gl = canvas.getContext('webgl');
     if (!gl) {
@@ -67,7 +73,7 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
     // Enable blending for transparency
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    helperCanvas = { canvas, gl, program };
+    helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
     return helperCanvas;
 };
 export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {

package/dist/drawing/turn-svg-into-drawable.js

@@ -1,10 +1,13 @@
 export const turnSvgIntoDrawable = (svg) => {
+    const { fill, color } = getComputedStyle(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;
+    const originalFill = svg.style.fill;
+    const originalColor = svg.style.color;
     svg.style.transform = 'none';
     svg.style.transformOrigin = '';
     // Margins were already included in the positioning calculation,
@@ -13,6 +16,8 @@ export const turnSvgIntoDrawable = (svg) => {
     svg.style.marginRight = '0';
     svg.style.marginTop = '0';
     svg.style.marginBottom = '0';
+    svg.style.fill = fill;
+    svg.style.color = color;
     const svgData = new XMLSerializer().serializeToString(svg);
     svg.style.marginLeft = originalMarginLeft;
     svg.style.marginRight = originalMarginRight;
@@ -20,6 +25,8 @@ export const turnSvgIntoDrawable = (svg) => {
     svg.style.marginBottom = originalMarginBottom;
     svg.style.transform = originalTransform;
     svg.style.transformOrigin = originalTransformOrigin;
+    svg.style.fill = originalFill;
+    svg.style.color = originalColor;
     return new Promise((resolve, reject) => {
         const image = new Image();
         const url = `data:image/svg+xml;base64,${btoa(svgData)}`;