Skip to main content

HTML-in-canvasv4.0.447

note

This is not the same as the <HtmlInCanvas> component for designing visuals. This page describes a @remotion/web-renderer option that uses HTML-in-canvas to capture full frames during client-side rendering.

On supported Chromium-based browsers, @remotion/web-renderer can optionally capture full frames using the experimental HTML-in-canvas APIs.

info

Use a recent version of Google Chrome or another Chromium-based browser with chrome://flags/#canvas-draw-element enabled. Current Chrome stable releases ship canvas.requestPaint() together with drawElementImage, which is required for correct frame capture. See Compatibility for details.

Enabling the option does not guarantee that this path runs. If the browser does not have HTML-in-canvas enabled, or if the composition contains an <HtmlInCanvas>, it falls back to the default frame capturing mechanism.

Enabling​

In code​

Pass allowHtmlInCanvas: true to renderMediaOnWeb() or renderStillOnWeb(). The default is false when you omit the field.

Example
await renderStillOnWeb({
  composition,
  frame: 0,
  inputProps: {},
  allowHtmlInCanvas: true,
});

In the Studio​

Open the render modal, go to the Advanced tab, and turn on Allow HTML-in-canvas. The initial value comes from your config and CLI defaults.

As the Studio default​

remotion.config.ts
Config.setAllowHtmlInCanvasEnabled(true);

Or start Studio with --allow-html-in-canvas. See setAllowHtmlInCanvasEnabled() and npx remotion studio.

Video capture performance​

When the browser supports transferable captureElementImage() snapshots, video exports can prepare the next frame while a worker draws the previous snapshot and constructs its VideoFrame. The renderer keeps at most two capture requests pending and uses the existing video encoder and audio mixer.

This optimization applies to renderMediaOnWeb() exports without onFrame or onArtifact callbacks. Stills and exports with either callback keep their existing capture path. Speed improvements depend on the composition and browser.

Check if HTML-in-canvas was used​

If HTML-in-canvas was used, you will see a warning in the browser console:

Using Chromium experimental HTML-in-canvas (drawElementImage) for this frame. Pixels may differ from the built-in DOM composer. Set allowHtmlInCanvas: false to force software rasterization. See https://remotion.dev/docs/client-side-rendering/html-in-canvas

If main-thread native capture starts but fails while capturing a frame, a warning is printed and the renderer falls back to the built-in DOM composer:

Not using HTML-in-canvas: drawElementImage failed (...); falling back to the built-in DOM composer.

If HTML-in-canvas is unavailable, disabled, or would require a nested capture, the built-in DOM composer is selected. Worker startup or frame-processing errors reject the video export and release the worker and pending frames.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

HTML-in-canvas depends on Chromium flag chrome://flags/#canvas-draw-element, which must be enabled explicitly.

Use a recent Chrome or Chromium version with the flag enabled for full support. Compositions containing <HtmlInCanvas> always use the built-in DOM composer because nested HTML-in-canvas captures are unsupported.

See also​