@remotion/web-renderer 4.0.405 → 4.0.406

package/dist/esm/index.mjs

@@ -632,20 +632,14 @@ var UpdateTime = ({
   });
 };
 
-// src/with-resolvers.ts
-var withResolvers = function() {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-};
-
 // src/create-scaffold.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-async function createScaffold({
+function checkForError(errorHolder) {
+  if (errorHolder.error) {
+    throw errorHolder.error;
+  }
+}
+function createScaffold({
   width,
   height,
   delayRenderTimeoutInMilliseconds,
@@ -684,10 +678,10 @@ async function createScaffold({
   div.className = scaffoldClassName;
   const cleanupCSS = Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   document.body.appendChild(div);
-  const { promise, resolve, reject } = withResolvers();
+  const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
     onUncaughtError: (err) => {
-      reject(err);
+      errorHolder.error = err instanceof Error ? err : new Error(String(err));
     }
   });
   const delayRenderScope = {
@@ -770,11 +764,10 @@ async function createScaffold({
       })
     }));
   });
-  resolve();
-  await promise;
   return {
     delayRenderScope,
     div,
+    errorHolder,
     [Symbol.dispose]: () => {
       root.unmount();
       div.remove();
@@ -976,6 +969,38 @@ var sendUsageEvent = async ({
   });
 };
 
+// src/tree-walker-cleanup-after-children.ts
+var createTreeWalkerCleanupAfterChildren = (treeWalker) => {
+  const cleanupAfterChildren = [];
+  const checkCleanUpAtBeginningOfIteration = () => {
+    for (let i = 0;i < cleanupAfterChildren.length; ) {
+      const cleanup = cleanupAfterChildren[i];
+      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
+        cleanup.cleanupFn();
+        cleanupAfterChildren.splice(i, 1);
+      } else {
+        i++;
+      }
+    }
+  };
+  const addCleanup = (element, cleanupFn) => {
+    cleanupAfterChildren.unshift({
+      element,
+      cleanupFn
+    });
+  };
+  const cleanupInTheEndOfTheIteration = () => {
+    for (const cleanup of cleanupAfterChildren) {
+      cleanup.cleanupFn();
+    }
+  };
+  return {
+    checkCleanUpAtBeginningOfIteration,
+    addCleanup,
+    [Symbol.dispose]: cleanupInTheEndOfTheIteration
+  };
+};
+
 // src/drawing/calculate-object-fit.ts
 var calculateFill = ({
   containerSize,
@@ -1934,24 +1959,35 @@ function setBorderRadius({
   };
 }
 
-// src/drawing/get-clipped-background.ts
-var getClippedBackground = async ({
-  element,
+// src/drawing/get-background-fill.ts
+var isColorTransparent = (color) => {
+  return color === "transparent" || color.startsWith("rgba") && (color.endsWith(", 0)") || color.endsWith(",0"));
+};
+var getBackgroundFill = ({
+  backgroundColor,
+  backgroundImage,
+  contextToDraw,
   boundingRect,
-  logLevel,
-  internalState
+  offsetLeft,
+  offsetTop
 }) => {
-  const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
-  const tempContext = tempCanvas.getContext("2d");
-  await compose({
-    element,
-    context: tempContext,
-    logLevel,
-    parentRect: boundingRect,
-    internalState,
-    onlyBackgroundClip: true
-  });
-  return tempContext;
+  if (backgroundImage && backgroundImage !== "none") {
+    const gradientInfo = parseLinearGradient(backgroundImage);
+    if (gradientInfo) {
+      const gradient = createCanvasGradient({
+        ctx: contextToDraw,
+        rect: boundingRect,
+        gradientInfo,
+        offsetLeft,
+        offsetTop
+      });
+      return gradient;
+    }
+  }
+  if (backgroundColor && backgroundColor !== "transparent" && !isColorTransparent(backgroundColor)) {
+    return backgroundColor;
+  }
+  return null;
 };
 
 // src/drawing/draw-background.ts
@@ -1966,61 +2002,65 @@ var drawBackground = async ({
   internalState,
   computedStyle,
   offsetLeft: parentOffsetLeft,
-  offsetTop: parentOffsetTop
+  offsetTop: parentOffsetTop,
+  scale
 }) => {
-  let contextToDraw = context;
-  const originalCompositeOperation = context.globalCompositeOperation;
-  let offsetLeft = 0;
-  let offsetTop = 0;
-  const finish = () => {
-    context.globalCompositeOperation = originalCompositeOperation;
-    if (context !== contextToDraw) {
-      context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width, contextToDraw.canvas.height);
+  let __stack = [];
+  try {
+    let contextToDraw = context;
+    const originalCompositeOperation = context.globalCompositeOperation;
+    let offsetLeft = 0;
+    let offsetTop = 0;
+    const _ = __using(__stack, {
+      [Symbol.dispose]: () => {
+        context.globalCompositeOperation = originalCompositeOperation;
+        if (context !== contextToDraw) {
+          context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width / scale, contextToDraw.canvas.height / scale);
+        }
+      }
+    }, 0);
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    if (backgroundClip.includes("text")) {
+      offsetLeft = boundingRect.left;
+      offsetTop = boundingRect.top;
+      const originalBackgroundClip = element.style.backgroundClip;
+      const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
+      element.style.backgroundClip = "initial";
+      element.style.webkitBackgroundClip = "initial";
+      const onlyBackgroundClipText = await createLayer({
+        element,
+        cutout: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
+        logLevel,
+        internalState,
+        scale,
+        onlyBackgroundClipText: true
+      });
+      onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
+      element.style.backgroundClip = originalBackgroundClip;
+      element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
+      contextToDraw = onlyBackgroundClipText;
+      contextToDraw.globalCompositeOperation = "source-in";
     }
-  };
-  const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
-  if (backgroundClip.includes("text")) {
-    offsetLeft = boundingRect.left;
-    offsetTop = boundingRect.top;
-    const originalBackgroundClip = element.style.backgroundClip;
-    const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
-    element.style.backgroundClip = "initial";
-    element.style.webkitBackgroundClip = "initial";
-    const drawn = await getClippedBackground({
-      element,
-      boundingRect: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
-      logLevel,
-      internalState
+    const backgroundFill = getBackgroundFill({
+      backgroundImage,
+      backgroundColor,
+      contextToDraw,
+      boundingRect,
+      offsetLeft,
+      offsetTop
     });
-    element.style.backgroundClip = originalBackgroundClip;
-    element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
-    contextToDraw = drawn;
-    contextToDraw.globalCompositeOperation = "source-in";
-  }
-  if (backgroundImage && backgroundImage !== "none") {
-    const gradientInfo = parseLinearGradient(backgroundImage);
-    if (gradientInfo) {
-      const gradient = createCanvasGradient({
-        ctx: contextToDraw,
-        rect: boundingRect,
-        gradientInfo,
-        offsetLeft,
-        offsetTop
-      });
-      const originalFillStyle = contextToDraw.fillStyle;
-      contextToDraw.fillStyle = gradient;
-      contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
-      contextToDraw.fillStyle = originalFillStyle;
-      return finish();
+    if (!backgroundFill) {
+      return;
     }
-  }
-  if (backgroundColor && backgroundColor !== "transparent" && !(backgroundColor.startsWith("rgba") && (backgroundColor.endsWith(", 0)") || backgroundColor.endsWith(",0")))) {
     const originalFillStyle = contextToDraw.fillStyle;
-    contextToDraw.fillStyle = backgroundColor;
+    contextToDraw.fillStyle = backgroundFill;
     contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
     contextToDraw.fillStyle = originalFillStyle;
+  } catch (_catch) {
+    var _err = _catch, _hasErr = 1;
+  } finally {
+    __callDispose(__stack, _err, _hasErr);
   }
-  finish();
 };
 
 // src/drawing/draw-border.ts
@@ -2572,9 +2612,10 @@ var setOverflowHidden = ({
 var setTransform = ({
   ctx,
   transform,
-  parentRect
+  parentRect,
+  scale
 }) => {
-  const offsetMatrix = new DOMMatrix().translate(-parentRect.x, -parentRect.y).multiply(transform).translate(parentRect.x, parentRect.y);
+  const offsetMatrix = new DOMMatrix().scale(scale, scale).translate(-parentRect.x, -parentRect.y).multiply(transform).translate(parentRect.x, parentRect.y);
   ctx.setTransform(offsetMatrix);
   return () => {
     ctx.setTransform(new DOMMatrix);
@@ -2592,7 +2633,8 @@ var drawElement = async ({
   parentRect,
   logLevel,
   element,
-  internalState
+  internalState,
+  scale
 }) => {
   const { backgroundImage, backgroundColor, backgroundClip } = computedStyle;
   const borderRadius = parseBorderRadius({
@@ -2603,7 +2645,8 @@ var drawElement = async ({
   const finishTransform = setTransform({
     ctx: context,
     transform: totalMatrix,
-    parentRect
+    parentRect,
+    scale
   });
   const finishOpacity = setOpacity({
     ctx: context,
@@ -2635,7 +2678,8 @@ var drawElement = async ({
     internalState,
     computedStyle,
     offsetLeft: parentRect.left,
-    offsetTop: parentRect.top
+    offsetTop: parentRect.top,
+    scale
   });
   await draw({ dimensions: rect, computedStyle, contextToDraw: context });
   finishBorderRadius();
@@ -2882,7 +2926,8 @@ var transformIn3d = ({
   sourceCanvas,
   sourceRect,
   destRect,
-  internalState
+  internalState,
+  scale
 }) => {
   const { canvas, gl, program, locations } = createHelperCanvas({
     canvasWidth: destRect.width,
@@ -2941,7 +2986,8 @@ var transformIn3d = ({
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
-  const transformMatrix = matrix.toFloat32Array();
+  const actualMatrix = scale !== 1 ? new DOMMatrix().scale(scale, scale).multiply(matrix) : matrix;
+  const transformMatrix = actualMatrix.toFloat32Array();
   gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
   gl.uniform2f(locations.uResolution, destRect.width, destRect.height);
   gl.uniform2f(locations.uOffset, -destRect.x, -destRect.y);
@@ -2981,7 +3027,8 @@ var handle3dTransform = ({
   sourceRect,
   tempCanvas,
   rectAfterTransforms,
-  internalState
+  internalState,
+  scale
 }) => {
   if (rectAfterTransforms.width <= 0 || rectAfterTransforms.height <= 0) {
     return null;
@@ -2991,7 +3038,8 @@ var handle3dTransform = ({
     matrix,
     sourceCanvas: tempCanvas,
     destRect: rectAfterTransforms,
-    internalState
+    internalState,
+    scale
   });
   return transformed;
 };
@@ -3005,11 +3053,10 @@ var handleMask = ({
   gradientInfo,
   rect,
   precomposeRect,
-  tempContext
+  tempContext,
+  scale
 }) => {
-  const rectOffsetX = rect.left - precomposeRect.left;
-  const rectOffsetY = rect.top - precomposeRect.top;
-  const rectToFill = new DOMRect(rectOffsetX, rectOffsetY, rect.width, rect.height);
+  const rectToFill = new DOMRect((rect.left - precomposeRect.left) * scale, (rect.top - precomposeRect.top) * scale, rect.width * scale, rect.height * scale);
   const gradient = createCanvasGradient({
     ctx: tempContext,
     rect: rectToFill,
@@ -3022,24 +3069,12 @@ var handleMask = ({
   tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
 };
 
-// src/drawing/precompose.ts
-var precomposeDOMElement = async ({
-  boundingRect,
-  element,
-  logLevel,
-  internalState
+// src/drawing/scale-rect.ts
+var scaleRect = ({
+  rect,
+  scale
 }) => {
-  const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
-  const tempContext = tempCanvas.getContext("2d");
-  await compose({
-    element,
-    context: tempContext,
-    logLevel,
-    parentRect: boundingRect,
-    internalState,
-    onlyBackgroundClip: false
-  });
-  return { tempCanvas, tempContext };
+  return new DOMRect(rect.x * scale, rect.y * scale, rect.width * scale, rect.height * scale);
 };
 
 // src/drawing/transform-rect-with-matrix.ts
@@ -3070,7 +3105,8 @@ var processNode = async ({
   logLevel,
   parentRect,
   internalState,
-  rootElement
+  rootElement,
+  scale
 }) => {
   let __stack = [];
   try {
@@ -3118,23 +3154,29 @@ var processNode = async ({
       if (!doRectsIntersect(precomposeRect, parentRect)) {
         return { type: "continue", cleanupAfterChildren: null };
       }
-      const { tempCanvas, tempContext } = await precomposeDOMElement({
-        boundingRect: precomposeRect,
+      const tempContext = await createLayer({
+        cutout: precomposeRect,
         element,
         logLevel,
-        internalState
+        internalState,
+        scale,
+        onlyBackgroundClipText: false
       });
-      let drawable = tempCanvas;
-      const rectAfterTransforms = roundToExpandRect(transformDOMRect({
-        rect: precomposeRect,
-        matrix: totalMatrix
+      let drawable = tempContext.canvas;
+      const rectAfterTransforms = roundToExpandRect(scaleRect({
+        scale,
+        rect: transformDOMRect({
+          rect: precomposeRect,
+          matrix: totalMatrix
+        })
       }));
       if (precompositing.needsMaskImage) {
         handleMask({
           gradientInfo: precompositing.needsMaskImage,
           rect,
           precomposeRect,
-          tempContext
+          tempContext,
+          scale
         });
       }
       if (precompositing.needs3DTransformViaWebGL) {
@@ -3143,26 +3185,25 @@ var processNode = async ({
           sourceRect: precomposeRect,
           tempCanvas: drawable,
           rectAfterTransforms,
-          internalState
+          internalState,
+          scale
         });
         if (t) {
           drawable = t;
         }
       }
       const previousTransform = context.getTransform();
-      if (drawable) {
-        context.setTransform(new DOMMatrix);
-        context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
-        context.setTransform(previousTransform);
-        Internals6.Log.trace({
-          logLevel,
-          tag: "@remotion/web-renderer"
-        }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms - helper canvas: ${drawable.width}x${drawable.height}`);
-        internalState.addPrecompose({
-          canvasWidth: precomposeRect.width,
-          canvasHeight: precomposeRect.height
-        });
-      }
+      context.setTransform(new DOMMatrix);
+      context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+      context.setTransform(previousTransform);
+      Internals6.Log.trace({
+        logLevel,
+        tag: "@remotion/web-renderer"
+      }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms - helper canvas: ${drawable.width}x${drawable.height}`);
+      internalState.addPrecompose({
+        canvasWidth: precomposeRect.width,
+        canvasHeight: precomposeRect.height
+      });
       return { type: "skip-children" };
     }
     const { cleanupAfterChildren } = await drawElement({
@@ -3175,7 +3216,8 @@ var processNode = async ({
       parentRect,
       logLevel,
       element,
-      internalState
+      internalState,
+      scale
     });
     return { type: "continue", cleanupAfterChildren };
   } catch (_catch) {
@@ -3344,7 +3386,7 @@ function findLineBreaks(span, rtl) {
 var drawText = ({
   span,
   logLevel,
-  onlyBackgroundClip
+  onlyBackgroundClipText
 }) => {
   const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
     const {
@@ -3368,7 +3410,7 @@ var drawText = ({
     contextToDraw.save();
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
-    contextToDraw.fillStyle = onlyBackgroundClip ? "black" : webkitTextFillColor;
+    contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     const isRTL = direction === "rtl";
     contextToDraw.textAlign = isRTL ? "right" : "left";
@@ -3403,7 +3445,8 @@ var handleTextNode = async ({
   parentRect,
   internalState,
   rootElement,
-  onlyBackgroundClip
+  onlyBackgroundClipText,
+  scale
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -3415,50 +3458,19 @@ var handleTextNode = async ({
   const value = await processNode({
     context,
     element: span,
-    draw: drawText({ span, logLevel, onlyBackgroundClip }),
+    draw: drawText({ span, logLevel, onlyBackgroundClipText }),
     logLevel,
     parentRect,
     internalState,
-    rootElement
+    rootElement,
+    scale
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
   return value;
 };
 
-// src/tree-walker-cleanup-after-children.ts
-var createTreeWalkerCleanupAfterChildren = (treeWalker) => {
-  const cleanupAfterChildren = [];
-  const checkCleanUpAtBeginningOfIteration = () => {
-    for (let i = 0;i < cleanupAfterChildren.length; ) {
-      const cleanup = cleanupAfterChildren[i];
-      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
-        cleanup.cleanupFn();
-        cleanupAfterChildren.splice(i, 1);
-      } else {
-        i++;
-      }
-    }
-  };
-  const addCleanup = (element, cleanupFn) => {
-    cleanupAfterChildren.unshift({
-      element,
-      cleanupFn
-    });
-  };
-  const cleanupInTheEndOfTheIteration = () => {
-    for (const cleanup of cleanupAfterChildren) {
-      cleanup.cleanupFn();
-    }
-  };
-  return {
-    checkCleanUpAtBeginningOfIteration,
-    addCleanup,
-    cleanupInTheEndOfTheIteration
-  };
-};
-
-// src/compose.ts
+// src/walk-over-node.ts
 var walkOverNode = ({
   node,
   context,
@@ -3466,7 +3478,8 @@ var walkOverNode = ({
   parentRect,
   internalState,
   rootElement,
-  onlyBackgroundClip
+  onlyBackgroundClipText,
+  scale
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -3476,7 +3489,8 @@ var walkOverNode = ({
       logLevel,
       parentRect,
       internalState,
-      rootElement
+      rootElement,
+      scale
     });
   }
   if (node instanceof Text) {
@@ -3487,11 +3501,14 @@ var walkOverNode = ({
       parentRect,
       internalState,
       rootElement,
-      onlyBackgroundClip
+      onlyBackgroundClipText,
+      scale
     });
   }
   throw new Error("Unknown node type");
 };
+
+// src/compose.ts
 var getFilterFunction = (node) => {
   if (!(node instanceof Element)) {
     return NodeFilter.FILTER_ACCEPT;
@@ -3511,89 +3528,78 @@ var compose = async ({
   logLevel,
   parentRect,
   internalState,
-  onlyBackgroundClip
+  onlyBackgroundClipText,
+  scale
 }) => {
-  const treeWalker = document.createTreeWalker(element, onlyBackgroundClip ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
-  if (onlyBackgroundClip) {
-    treeWalker.nextNode();
-    if (!treeWalker.currentNode) {
-      return;
-    }
-  }
-  const {
-    checkCleanUpAtBeginningOfIteration,
-    addCleanup,
-    cleanupInTheEndOfTheIteration
-  } = createTreeWalkerCleanupAfterChildren(treeWalker);
-  while (true) {
-    checkCleanUpAtBeginningOfIteration();
-    const val = await walkOverNode({
-      node: treeWalker.currentNode,
-      context,
-      logLevel,
-      parentRect,
-      internalState,
-      rootElement: element,
-      onlyBackgroundClip
-    });
-    if (val.type === "skip-children") {
-      if (!skipToNextNonDescendant(treeWalker)) {
-        break;
-      }
-    } else {
-      if (val.cleanupAfterChildren) {
-        addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
+  let __stack = [];
+  try {
+    const treeWalker = document.createTreeWalker(element, onlyBackgroundClipText ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    if (onlyBackgroundClipText) {
+      treeWalker.nextNode();
+      if (!treeWalker.currentNode) {
+        return;
       }
-      if (!treeWalker.nextNode()) {
-        break;
+    }
+    const treeWalkerClean = __using(__stack, createTreeWalkerCleanupAfterChildren(treeWalker), 0);
+    const { checkCleanUpAtBeginningOfIteration, addCleanup } = treeWalkerClean;
+    while (true) {
+      checkCleanUpAtBeginningOfIteration();
+      const val = await walkOverNode({
+        node: treeWalker.currentNode,
+        context,
+        logLevel,
+        parentRect,
+        internalState,
+        rootElement: element,
+        onlyBackgroundClipText,
+        scale
+      });
+      if (val.type === "skip-children") {
+        if (!skipToNextNonDescendant(treeWalker)) {
+          break;
+        }
+      } else {
+        if (val.cleanupAfterChildren) {
+          addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
+        }
+        if (!treeWalker.nextNode()) {
+          break;
+        }
       }
     }
+  } catch (_catch) {
+    var _err = _catch, _hasErr = 1;
+  } finally {
+    __callDispose(__stack, _err, _hasErr);
   }
-  cleanupInTheEndOfTheIteration();
 };
 
 // src/take-screenshot.ts
-var createFrame = async ({
-  div,
-  width,
-  height,
+var createLayer = async ({
+  element,
+  scale,
   logLevel,
-  internalState
+  internalState,
+  onlyBackgroundClipText,
+  cutout
 }) => {
-  const canvas = new OffscreenCanvas(width, height);
+  const scaledWidth = Math.ceil(cutout.width * scale);
+  const scaledHeight = Math.ceil(cutout.height * scale);
+  const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("Could not get context");
   }
   await compose({
-    element: div,
+    element,
     context,
     logLevel,
-    parentRect: new DOMRect(0, 0, width, height),
+    parentRect: cutout,
     internalState,
-    onlyBackgroundClip: false
+    onlyBackgroundClipText,
+    scale
   });
-  return canvas;
-};
-var takeScreenshot = async ({
-  div,
-  width,
-  height,
-  imageFormat,
-  logLevel,
-  internalState
-}) => {
-  const frame = await createFrame({
-    div,
-    width,
-    height,
-    logLevel,
-    internalState
-  });
-  const imageData = await frame.convertToBlob({
-    type: `image/${imageFormat}`
-  });
-  return imageData;
+  return context;
 };
 
 // src/throttle-progress.ts
@@ -3639,6 +3645,28 @@ var createThrottledProgressCallback = (callback, throttleMs = DEFAULT_THROTTLE_M
   return { throttled, [Symbol.dispose]: cleanup };
 };
 
+// src/validate-scale.ts
+var validateScale = (scale) => {
+  if (typeof scale === "undefined") {
+    return;
+  }
+  if (typeof scale !== "number") {
+    throw new Error('Scale should be a number or undefined, but is "' + JSON.stringify(scale) + '"');
+  }
+  if (Number.isNaN(scale)) {
+    throw new Error("`scale` should not be NaN, but is NaN");
+  }
+  if (!Number.isFinite(scale)) {
+    throw new Error(`"scale" must be finite, but is ${scale}`);
+  }
+  if (scale <= 0) {
+    throw new Error(`"scale" must be bigger than 0, but is ${scale}`);
+  }
+  if (scale > 16) {
+    throw new Error(`"scale" must be smaller or equal than 16, but is ${scale}`);
+  }
+};
+
 // src/validate-video-frame.ts
 var validateVideoFrame = ({
   originalFrame,
@@ -3668,6 +3696,17 @@ var validateVideoFrame = ({
   return returnedFrame;
 };
 
+// src/with-resolvers.ts
+var withResolvers = function() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+
 // src/wait-for-ready.ts
 var waitForReady = ({
   timeoutInMilliseconds,
@@ -3698,7 +3737,12 @@ var waitForReady = ({
     if (scope.remotion_cancelledError !== undefined) {
       cancelled = true;
       internalState?.addWaitForReadyTime(performance.now() - start);
-      reject(scope.remotion_cancelledError);
+      const stack = scope.remotion_cancelledError;
+      const message = stack.split(`
+`)[0].replace(/^Error: /, "");
+      const error = new Error(message);
+      error.stack = stack;
+      reject(error);
       return;
     }
     if (performance.now() - start > timeoutInMilliseconds + 3000) {
@@ -3782,10 +3826,12 @@ var internalRenderMediaOnWeb = async ({
   onFrame,
   outputTarget: userDesiredOutputTarget,
   licenseKey,
-  muted
+  muted,
+  scale
 }) => {
   let __stack2 = [];
   try {
+    validateScale(scale);
     const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
     if (outputTarget === "web-fs") {
       await cleanupStaleOpfsFiles();
@@ -3826,7 +3872,7 @@ var internalRenderMediaOnWeb = async ({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
-    const scaffold = __using(__stack2, await createScaffold({
+    const scaffold = __using(__stack2, createScaffold({
       width: resolved.width,
       height: resolved.height,
       fps: resolved.fps,
@@ -3844,7 +3890,7 @@ var internalRenderMediaOnWeb = async ({
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName
     }), 0);
-    const { delayRenderScope, div, timeUpdater, collectAssets } = scaffold;
+    const { delayRenderScope, div, timeUpdater, collectAssets, errorHolder } = scaffold;
     const internalState = __using(__stack2, makeInternalState(), 0);
     const keepalive = __using(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
@@ -3873,6 +3919,7 @@ var internalRenderMediaOnWeb = async ({
           internalState,
           keepalive
         });
+        checkForError(errorHolder);
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
@@ -3915,23 +3962,25 @@ var internalRenderMediaOnWeb = async ({
             keepalive,
             internalState
           });
+          checkForError(errorHolder);
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
           const createFrameStart = performance.now();
-          const imageData = await createFrame({
-            div,
-            width: resolved.width,
-            height: resolved.height,
+          const layer = await createLayer({
+            element: div,
+            scale,
             logLevel,
-            internalState
+            internalState,
+            onlyBackgroundClipText: false,
+            cutout: new DOMRect(0, 0, resolved.width, resolved.height)
           });
           internalState.addCreateFrameTime(performance.now() - createFrameStart);
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
           const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
-          const videoFrame = new VideoFrame(imageData, {
+          const videoFrame = new VideoFrame(layer.canvas, {
             timestamp
           });
           progress.renderedFrames++;
@@ -3945,8 +3994,8 @@ var internalRenderMediaOnWeb = async ({
             frameToEncode = validateVideoFrame({
               originalFrame: videoFrame,
               returnedFrame,
-              expectedWidth: resolved.width,
-              expectedHeight: resolved.height,
+              expectedWidth: Math.round(resolved.width * scale),
+              expectedHeight: Math.round(resolved.height * scale),
               expectedTimestamp: timestamp
             });
           }
@@ -3954,7 +4003,7 @@ var internalRenderMediaOnWeb = async ({
           const assets = collectAssets.current.collectAssets();
           if (onArtifact) {
             await artifactsHandler.handle({
-              imageData,
+              imageData: layer.canvas,
               frame,
               assets,
               onArtifact
@@ -4060,7 +4109,8 @@ var renderMediaOnWeb = (options) => {
     onFrame: options.onFrame ?? null,
     outputTarget: options.outputTarget ?? null,
     licenseKey: options.licenseKey ?? undefined,
-    muted: options.muted ?? false
+    muted: options.muted ?? false,
+    scale: options.scale ?? 1
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
@@ -4079,10 +4129,12 @@ async function internalRenderStillOnWeb({
   composition,
   signal,
   onArtifact,
-  licenseKey
+  licenseKey,
+  scale
 }) {
   let __stack = [];
   try {
+    validateScale(scale);
     const resolved = await Internals9.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
@@ -4098,7 +4150,7 @@ async function internalRenderStillOnWeb({
       return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
     }
     const internalState = __using(__stack, makeInternalState(), 0);
-    const scaffold = __using(__stack, await createScaffold({
+    const scaffold = __using(__stack, createScaffold({
       width: resolved.width,
       height: resolved.height,
       delayRenderTimeoutInMilliseconds,
@@ -4116,7 +4168,7 @@ async function internalRenderStillOnWeb({
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName
     }), 0);
-    const { delayRenderScope, div, collectAssets } = scaffold;
+    const { delayRenderScope, div, collectAssets, errorHolder } = scaffold;
     const artifactsHandler = handleArtifacts();
     try {
       if (signal?.aborted) {
@@ -4130,16 +4182,20 @@ async function internalRenderStillOnWeb({
         internalState: null,
         keepalive: null
       });
+      checkForError(errorHolder);
       if (signal?.aborted) {
         throw new Error("renderStillOnWeb() was cancelled");
       }
-      const imageData = await takeScreenshot({
-        div,
-        width: resolved.width,
-        height: resolved.height,
-        imageFormat,
+      const capturedFrame = await createLayer({
+        element: div,
+        scale,
         logLevel,
-        internalState
+        internalState,
+        onlyBackgroundClipText: false,
+        cutout: new DOMRect(0, 0, resolved.width, resolved.height)
+      });
+      const imageData = await capturedFrame.canvas.convertToBlob({
+        type: `image/${imageFormat}`
       });
       const assets = collectAssets.current.collectAssets();
       if (onArtifact) {
@@ -4178,7 +4234,8 @@ var renderStillOnWeb = (options) => {
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     signal: options.signal ?? null,
     onArtifact: options.onArtifact ?? null,
-    licenseKey: options.licenseKey ?? undefined
+    licenseKey: options.licenseKey ?? undefined,
+    scale: options.scale ?? 1
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };