@remotion/web-renderer 4.0.393 → 4.0.395

package/dist/calculate-transforms.d.ts

@@ -0,0 +1,9 @@
+export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
+    dimensions: DOMRect;
+    totalMatrix: DOMMatrix;
+    reset: () => void;
+    nativeTransformOrigin: {
+        x: number;
+        y: number;
+    };
+};

package/dist/calculate-transforms.js

@@ -0,0 +1,74 @@
+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 = [];
+    while (parent) {
+        const computedStyle = getComputedStyle(parent);
+        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,
+    };
+};

package/dist/composable.d.ts

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

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,12 @@
+import { calculateTransforms } from './calculate-transforms';
+import { turnSvgIntoDrawable } from './compose-svg';
+export const composeCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
+    const drawable = canvas instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(canvas)
+        : canvas;
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.setTransform(new DOMMatrix());
+    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/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>;