Skip to main content
warning

Experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

HTML in Canvasv4.0.447

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

Enabling the option does not guarantee that this path runs. If the browser does not have HTML in Canvas enabled, 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,
  imageFormat: 'png',
  inputProps: {},
  allowHtmlInCanvas: true,
});

In the Studio​

With client-side rendering enabled, open the render modal, go to the Other tab, and turn on Allow HTML-in-Canvas. The initial value comes from your config and CLI defaults (below).

As the Studio default​

In remotion.config.ts:

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

Or start Studio with the CLI flag (it overrides the config file for this value):

npx remotion studio --allow-html-in-canvas

See setAllowHtmlInCanvasEnabled() and npx remotion studio for details. The flag description is also available as:

When client-side rendering is enabled in the Studio, allow the experimental Chromium HTML-in-Canvas path (drawElementImage) for capturing frames instead of the built-in DOM composer. See Web Renderer docs.

Check if HTML in Canvas was used​

Messages use Remotion’s logger with tag @remotion/web-renderer. Use logLevel 'warn' or lower (e.g. 'info', 'verbose') or you may not see them.

Native path was used​

renderStillOnWeb() prints a warning like:

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://github.com/WICG/html-in-canvas

renderMediaOnWeb() prints a warning once per render (first successful native layer), for example:

Using Chromium experimental HTML-in-Canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas

Native path was not used (warning)​

When drawElementImage exists but HTML-in-Canvas still cannot be used, Remotion logs a warning whose text starts with Not using html-in-canvas: and then a reason, for example:

Not using html-in-canvas: drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.

If capture throws during drawElementImage, the reason includes the error message, for example:

Not using html-in-canvas: drawElementImage failed (Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': …); falling back to the built-in DOM composer.

At verbose log level, a failed capture also emits a separate verbose line: html-in-canvas capture failed, falling back to software compose (with the error attached).

No message​

If the browser does not expose drawElementImage, or you set allowHtmlInCanvas: false, Remotion does not print a warning for choosing the built-in composer. In those cases infer behavior from the absence of the “Using Chromium experimental HTML-in-Canvas” message above.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

HTML-in-Canvas depends on Chromium shipping the experimental APIs (for example after enabling chrome://flags/#canvas-draw-element where applicable). Other browsers continue to use the built-in DOM composer.

See also​