@remotion/web-renderer 4.0.392 → 4.0.394

package/dist/calculate-transforms.d.ts

@@ -6,6 +6,4 @@ export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement)
         x: number;
         y: number;
     };
-    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
-    opacity: number;
 };

package/dist/calculate-transforms.js

@@ -1,4 +1,3 @@
-import { parseBorderRadius } from './drawing/border-radius';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -22,18 +21,8 @@ export const calculateTransforms = (element) => {
     let parent = element;
     const transforms = [];
     const toReset = [];
-    let borderRadius = '';
-    let opacity = 1;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
-        if (parent === element) {
-            borderRadius = computedStyle.borderRadius;
-        }
-        // Multiply opacity values from element and all parents
-        const parentOpacity = computedStyle.opacity;
-        if (parentOpacity && parentOpacity !== '') {
-            opacity *= parseFloat(parentOpacity);
-        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -81,11 +70,5 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
-        borderRadius: parseBorderRadius({
-            borderRadius,
-            width: dimensions.width,
-            height: dimensions.height,
-        }),
-        opacity,
     };
 };

package/dist/can-use-webfs-target.d.ts

@@ -0,0 +1 @@
+export declare const canUseWebFsWriter: () => Promise<boolean>;

package/dist/can-use-webfs-target.js

@@ -0,0 +1,19 @@
+export const canUseWebFsWriter = async () => {
+    if (!('storage' in navigator)) {
+        return false;
+    }
+    if (!('getDirectory' in navigator.storage)) {
+        return false;
+    }
+    try {
+        const directoryHandle = await navigator.storage.getDirectory();
+        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
+            create: true,
+        });
+        const canUse = fileHandle.createWritable !== undefined;
+        return canUse;
+    }
+    catch (_a) {
+        return false;
+    }
+};

package/dist/composable.d.ts

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

package/dist/compose-canvas.js

@@ -1,36 +1,12 @@
-import { setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './drawing/compose-svg';
-import { setOpacity } from './drawing/opacity';
-import { setTransform } from './drawing/transform';
+import { turnSvgIntoDrawable } from './compose-svg';
 export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
     const drawable = canvas instanceof SVGSVGElement
         ? await turnSvgIntoDrawable(canvas)
         : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
     context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
+    context.setTransform(new DOMMatrix());
     reset();
 };

package/dist/compose.d.ts

@@ -1 +1,6 @@
-export declare const compose: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;
+export declare const compose: ({ element, context, offsetLeft, offsetTop, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<void>;

package/dist/compose.js

@@ -1,7 +1,23 @@
+import { drawDomElement } from './drawing/draw-dom-element';
 import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
 import { handleTextNode } from './drawing/text/handle-text-node';
-import { turnSvgIntoDrawable } from './drawing/turn-svg-into-drawable';
-export const compose = async (element, context) => {
+import { skipToNextNonDescendant } from './walk-tree';
+const walkOverNode = ({ node, context, offsetLeft, offsetTop, }) => {
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+        return drawElementToCanvas({
+            element: node,
+            context,
+            draw: drawDomElement(node),
+            offsetLeft,
+            offsetTop,
+        });
+    }
+    if (node instanceof Text) {
+        return handleTextNode({ node, context, offsetLeft, offsetTop });
+    }
+    throw new Error('Unknown node type');
+};
+export const compose = async ({ element, context, offsetLeft, offsetTop, }) => {
     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
@@ -16,28 +32,20 @@ export const compose = async (element, context) => {
         }
         return NodeFilter.FILTER_ACCEPT;
     });
-    while (treeWalker.nextNode()) {
-        const node = treeWalker.currentNode;
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
-            await drawElementToCanvas({
-                element: node,
-                context,
-                draw: async (dimensions) => {
-                    const drawable = await (node instanceof SVGSVGElement
-                        ? turnSvgIntoDrawable(node)
-                        : node instanceof HTMLImageElement
-                            ? node
-                            : node instanceof HTMLCanvasElement
-                                ? node
-                                : null);
-                    if (drawable) {
-                        context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-                    }
-                },
-            });
+    while (true) {
+        const val = await walkOverNode({
+            node: treeWalker.currentNode,
+            context,
+            offsetLeft,
+            offsetTop,
+        });
+        if (val === 'skip-children') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
         }
-        else if (node instanceof Text) {
-            await handleTextNode(node, context);
+        else if (!treeWalker.nextNode()) {
+            break;
         }
     }
 };

package/dist/drawing/calculate-transforms.js

@@ -46,10 +46,10 @@ export const calculateTransforms = (element) => {
             // 2. Rotate
             // 3. Scale
             // 4. CSS "transform"
-            if (rotate !== '') {
+            if (rotate !== '' && rotate !== 'none') {
                 additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
             }
-            if (scale !== '') {
+            if (scale !== '' && scale !== 'none') {
                 additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
             }
             additionalMatrices.push(matrix);

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

@@ -0,0 +1,2 @@
+import type { DrawFn } from './drawn-fn';
+export declare const drawDomElement: (node: HTMLElement | SVGElement) => DrawFn;

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

@@ -0,0 +1,17 @@
+import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
+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) {
+            return;
+        }
+        contextToDraw.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    };
+    return domDrawFn;
+};

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

@@ -1,5 +1,9 @@
-export declare const drawElementToCanvas: ({ element, context, draw, }: {
+import type { DrawFn } from './drawn-fn';
+export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
-    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
-}) => Promise<void>;
+    draw: DrawFn;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<DrawElementToCanvasReturnValue>;

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

@@ -1,19 +1,20 @@
+import { compose } from '../compose';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
 import { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, }) => {
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, }) => {
     const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
-        return;
+        return 'continue';
     }
     if (dimensions.width <= 0 || dimensions.height <= 0) {
         reset();
-        return;
+        return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const offsetLeft = Math.min(dimensions.left, 0);
-        const offsetTop = Math.min(dimensions.top, 0);
+        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 tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
@@ -21,34 +22,32 @@ export const drawElementToCanvas = async ({ element, context, draw, }) => {
         if (!context2) {
             throw new Error('Could not get context');
         }
-        const adjustedDimensions = new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height);
-        await drawElement({
-            dimensions: adjustedDimensions,
-            computedStyle,
+        await compose({
+            element,
             context: context2,
-            draw,
-            opacity,
-            totalMatrix: new DOMMatrix(),
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
         });
         const transformed = transformIn3d({
             canvasWidth: tempCanvasWidth,
             canvasHeight: tempCanvasHeight,
             matrix: totalMatrix,
             sourceCanvas: tempCanvas,
-            offsetLeft,
-            offsetTop,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
         });
         context.drawImage(transformed, 0, 0);
+        reset();
+        return 'skip-children';
     }
-    else {
-        await drawElement({
-            dimensions,
-            computedStyle,
-            context,
-            draw,
-            opacity,
-            totalMatrix,
-        });
-    }
+    await drawElement({
+        dimensions: new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height),
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+    });
     reset();
+    return 'continue';
 };

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

@@ -1,8 +1,9 @@
+import type { DrawFn } from './drawn-fn';
 export declare const drawElement: ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }: {
     dimensions: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
     opacity: number;
     totalMatrix: DOMMatrix;
-    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
+    draw: DrawFn;
 }) => Promise<void>;

package/dist/drawing/draw-element.js

@@ -34,7 +34,7 @@ export const drawElement = async ({ dimensions, computedStyle, context, draw, op
         context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
         context.fillStyle = originalFillStyle;
     }
-    await draw(dimensions, computedStyle);
+    await draw({ dimensions, computedStyle, contextToDraw: context });
     drawBorder({
         ctx: context,
         x: dimensions.left,

package/dist/drawing/drawn-fn.d.ts

@@ -0,0 +1,5 @@
+export type DrawFn = ({ computedStyle, contextToDraw, dimensions, }: {
+    dimensions: DOMRect;
+    computedStyle: CSSStyleDeclaration;
+    contextToDraw: OffscreenCanvasRenderingContext2D;
+}) => Promise<void> | void;

package/dist/drawing/drawn-fn.js

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

package/dist/drawing/text/apply-text-transform.d.ts

@@ -0,0 +1 @@
+export declare const applyTextTransform: (text: string, transform: string) => string;

package/dist/drawing/text/apply-text-transform.js

@@ -0,0 +1,12 @@
+export const applyTextTransform = (text, transform) => {
+    if (transform === 'uppercase') {
+        return text.toUpperCase();
+    }
+    if (transform === 'lowercase') {
+        return text.toLowerCase();
+    }
+    if (transform === 'capitalize') {
+        return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    return text;
+};

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

@@ -1 +1,2 @@
-export declare const drawTextToCanvas: (parentElement: HTMLElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;
+import type { DrawFn } from '../drawn-fn';
+export declare const drawText: (span: HTMLSpanElement) => DrawFn;

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

@@ -1,57 +1,44 @@
-import { withResolvers } from '../../with-resolvers';
-export const drawTextToCanvas = async (parentElement, context) => {
-    const clientRect = parentElement.getBoundingClientRect();
-    const computedStyle = getComputedStyle(parentElement);
-    const clonedNode = parentElement.cloneNode(true);
-    for (let i = 0; i < computedStyle.length; i++) {
-        const propertyName = computedStyle[i];
-        const value = computedStyle.getPropertyValue(propertyName);
-        if (propertyName === 'margin-top' ||
-            propertyName === 'margin-bottom' ||
-            propertyName === 'margin-left' ||
-            propertyName === 'margin-right' ||
-            propertyName === 'margin') {
-            // @ts-expect-error - propertyName is a valid CSS property
-            clonedNode.style[propertyName] = '0px';
-            continue;
+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) => {
+    const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
+        const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
+        const isVertical = writingMode !== 'horizontal-tb';
+        if (isVertical) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel: 'warn',
+                tag: '@remotion/web-renderer',
+            }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+            return;
         }
-        // @ts-expect-error - propertyName is a valid CSS property
-        clonedNode.style[propertyName] = value;
-    }
-    // Create an SVG that contains the cloned node via a foreignObject
-    const svgNS = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(svgNS, 'svg');
-    svg.setAttribute('width', `${clientRect.width}`);
-    svg.setAttribute('height', `${clientRect.height}`);
-    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
-    foreignObject.setAttribute('x', '0');
-    foreignObject.setAttribute('y', '0');
-    foreignObject.setAttribute('width', `${clientRect.width}`);
-    foreignObject.setAttribute('height', `${clientRect.height}`);
-    // The cloned node must be in XHTML namespace to render properly
-    const xhtmlNS = 'http://www.w3.org/1999/xhtml';
-    const wrappedDiv = document.createElementNS(xhtmlNS, 'div');
-    wrappedDiv.style.width = `${clientRect.width}px`;
-    wrappedDiv.style.height = `${clientRect.height}px`;
-    wrappedDiv.appendChild(clonedNode);
-    foreignObject.appendChild(wrappedDiv);
-    svg.appendChild(foreignObject);
-    // Convert SVG to data URL
-    const serializer = new XMLSerializer();
-    const svgString = serializer.serializeToString(svg);
-    const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
-    const { promise, resolve, reject } = withResolvers();
-    // Create image and draw when loaded
-    const img = new window.Image();
-    img.onload = function () {
-        resolve(img);
-    };
-    img.onerror = function (err) {
-        // We may want to add robust error handling here
-        reject(err);
+        contextToDraw.save();
+        contextToDraw.font = `${fontWeight} ${fontSize} ${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';
+        const originalText = span.textContent;
+        const collapsedText = getCollapsedText(span);
+        const transformedText = applyTextTransform(collapsedText, textTransform);
+        span.textContent = transformedText;
+        // For RTL text, fill from the right edge instead of left
+        const xPosition = isRTL ? rect.right : rect.left;
+        const lines = findLineBreaks(span, isRTL);
+        let offsetTop = 0;
+        for (const line of lines) {
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+            offsetTop += line.offsetTop;
+        }
+        span.textContent = originalText;
+        contextToDraw.restore();
     };
-    img.src = svgDataUrl;
-    await promise;
-    console.log(clientRect);
-    context.drawImage(img, clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+    return drawFn;
 };

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

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

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

@@ -1,20 +1,6 @@
-import { Internals } from 'remotion';
 import { drawElementToCanvas } from '../draw-element-to-canvas';
-import { findLineBreaks } from './find-line-breaks.text';
-import { getCollapsedText } from './get-collapsed-text';
-const applyTextTransform = (text, transform) => {
-    if (transform === 'uppercase') {
-        return text.toUpperCase();
-    }
-    if (transform === 'lowercase') {
-        return text.toLowerCase();
-    }
-    if (transform === 'capitalize') {
-        return text.replace(/\b\w/g, (char) => char.toUpperCase());
-    }
-    return text;
-};
-export const handleTextNode = async (node, context) => {
+import { drawText } from './draw-text';
+export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -22,48 +8,15 @@ export const handleTextNode = async (node, context) => {
     }
     parent.insertBefore(span, node);
     span.appendChild(node);
-    await drawElementToCanvas({
+    const value = await drawElementToCanvas({
         context,
         element: span,
-        draw(rect, style) {
-            const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = style;
-            const isVertical = writingMode !== 'horizontal-tb';
-            if (isVertical) {
-                // TODO: Only warn once per render.
-                Internals.Log.warn({
-                    logLevel: 'warn',
-                    tag: '@remotion/web-renderer',
-                }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
-                return;
-            }
-            context.save();
-            context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-            context.fillStyle = color;
-            context.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';
-            context.textAlign = isRTL ? 'right' : 'left';
-            context.textBaseline = 'top';
-            const originalText = span.textContent;
-            const collapsedText = getCollapsedText(span);
-            const transformedText = applyTextTransform(collapsedText, textTransform);
-            span.textContent = transformedText;
-            // For RTL text, fill from the right edge instead of left
-            const xPosition = isRTL ? rect.right : rect.left;
-            const lines = findLineBreaks(span, isRTL);
-            let offsetTop = 0;
-            for (const line of lines) {
-                context.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
-                offsetTop += line.offsetTop;
-            }
-            span.textContent = originalText;
-            context.restore();
-        },
+        draw: drawText(span),
+        offsetLeft,
+        offsetTop,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);
     parent.removeChild(span);
+    return value;
 };

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

@@ -12,7 +12,16 @@ function compileShader(shaderGl, source, type) {
     }
     return shader;
 }
-export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {
+let helperCanvas = null;
+const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
+    if (helperCanvas &&
+        helperCanvas.canvas.width >= canvasWidth &&
+        helperCanvas.canvas.height >= canvasHeight) {
+        // Clear and draw
+        helperCanvas.gl.clearColor(0, 0, 0, 0); // Transparent background
+        helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
+        return helperCanvas;
+    }
     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
     const gl = canvas.getContext('webgl');
     if (!gl) {
@@ -52,6 +61,19 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
         throw new Error('Program link error: ' + gl.getProgramInfoLog(program));
     }
     gl.useProgram(program);
+    // Clear and draw
+    gl.clearColor(0, 0, 0, 0); // Transparent background
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    // Enable blending for transparency
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    helperCanvas = { canvas, gl, program };
+    return helperCanvas;
+};
+export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {
+    const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     // Create a quad (two triangles) with texture coordinates
     // prettier-ignore
     const vertices = new Float32Array([
@@ -65,8 +87,6 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
         canvasWidth + offsetLeft, offsetTop, 1, 0, // bottom-right
         canvasWidth + offsetLeft, canvasHeight + offsetTop, 1, 1, // top-right
     ]);
-    const vertexBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
     const aPosition = gl.getAttribLocation(program, 'aPosition');
     const aTexCoord = gl.getAttribLocation(program, 'aTexCoord');
@@ -91,12 +111,12 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     const zScale = 1000000000; // By default infinite in chrome
     // Create orthographic projection matrix for pixel coordinates
     const projectionMatrix = new Float32Array([
-        2 / canvasWidth,
+        2 / canvas.width,
         0,
         0,
         0,
         0,
-        -2 / canvasHeight,
+        -2 / canvas.height,
         0,
         0,
         0,
@@ -114,12 +134,9 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     gl.uniformMatrix4fv(uTransform, false, transformMatrix);
     gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
     gl.uniform1i(uTexture, 0); // Use texture unit 0
-    // Clear and draw
-    gl.clearColor(0, 0, 0, 0); // Transparent background
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    // Enable blending for transparency
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
+    // Clean up resources to prevent leaks and ensure clean state for reuse
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vertexBuffer);
     return canvas;
 };