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.

info

As of April 2026, this feature requires Chrome Canary. Regular Chrome has partial support (drawElementImage) but is missing canvas.requestPaint(), which can cause rendering issues such as frames being repeated. See Compatibility for details.

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,
  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 API to be used for capturing frames. See HTML-in-canvas docs.

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

If HTML-in-canvas is available, and allowed, but not used, a warning will be printed:

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

This can happen for example if enabling the feature in Chrome rather than Chrome Canary (as of time of writing in April 2026).

If HTML-in-canvas is not available, or not allowed, no warning will be printed.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

HTML-in-canvas depends on Chromium flag chrome://flags/#canvas-draw-element which needs to be explicitly enabled as of time of writing in April 2026.

As of April 2026, Chrome Canary is required for full support. Regular Chrome exposes drawElementImage when the flag is enabled, but does not yet ship canvas.requestPaint(). Without requestPaint(), the renderer cannot synchronize paint operations, which can lead to repeated or incorrect frames.

Enabling​

In code​

In the Studio​

As the Studio default​

Check if HTML-in-canvas was used​

Compatibility​

See also​