Skip to main content

HTML in Canvas<AvailableFrom v="4.0.446" />

warning

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

On supported Chromium-based browsers, @remotion/web-renderer can optionally capture full frames using the experimental HTML-in-Canvas APIs (CanvasRenderingContext2D.drawElementImage, HTMLCanvasElement.requestPaint, and a layoutSubtree canvas) instead of Remotion’s built-in DOM composer. This path is often faster, but pixels may not match the software composer.

Enabling the option does not guarantee that this path runs. Remotion only uses it when the browser exposes the required APIs, setup succeeds, and capture succeeds for a given frame. Otherwise it falls back to the built-in composer without blocking the render.

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.

Console messages​

If the native HTML-in-Canvas path is used, Remotion logs a warning to the browser console (tag @remotion/web-renderer) so you know captures may differ from the software path. If drawElementImage is available but capture fails for another reason, a warning explains the fallback. If the browser does not expose drawElementImage, Remotion stays quiet and uses the built-in composer.

Use logLevel: 'warn' or a more verbose level if you do not see these messages.

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​