Skip to main content

HTML-in-canvasv4.0.455

HTML-in-canvas is an experimental browser API currently only available in Chrome Canary behind a flag.

It allows you to draw a live DOM node into a <canvas> and post-process it with the Canvas 2D API, WebGL or WebGPU.

Enabling the flag in Chrome Canary​

To preview HTML-in-canvas effects in the Remotion Studio, you need to use Chrome Canary v149 and enable a flag:

  1. Install Chrome Canary.
  2. Open chrome://flags/#canvas-draw-element.
  3. Set the HTML-in-Canvas flag to Enabled and restart.

To check at runtime whether HTML-in-canvas is supported, you can use HtmlInCanvas.isSupported().

For rendering, you don't need to do anything — see Rendering below.

The <HtmlInCanvas> component​

<HtmlInCanvas> is a convenient component which wraps its children in a canvas and allows you to manipulate the content when the canvas is painted.

MyComp.tsx
import {HtmlInCanvas, type HtmlInCanvasOnPaint} from 'remotion';

const onPaint: HtmlInCanvasOnPaint = ({canvas, element, elementImage}) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Failed to acquire 2D context');
  }

  ctx.reset();
  ctx.filter = 'blur(8px)';
  const transform = ctx.drawElementImage(elementImage, 0, 0);
  element.style.transform = transform.toString();
};

export const MyComp: React.FC = () => {
  return (
    <HtmlInCanvas width={1280} height={720} onPaint={onPaint}>
      <div style={{fontSize: 80}}>Hello</div>
    </HtmlInCanvas>
  );
};

See the <HtmlInCanvas> reference for the full API, including WebGL and WebGPU examples.

Using the browser API directly​

You can also use the browser API directly. Refer to the working draft to do so.
If you do so, you are responsible yourself for calling delayRender() and continueRender() to synchronize paint operations.

Examples​

Find example components in the remotion-dev/html-in-canvas repository.

Also see the following sample prompts in our prompt gallery that you can give your coding agent:

With @remotion/transitions​

@remotion/transitions can take advantage of HTML-in-canvas as well to blend two scenes.
See zoomBlur() presentation for an example.

You can also build your own — see Making a custom HTML-in-canvas presentation.

Limitations​

HTML-in-canvas is only available in Chrome Canary (Chrome 149 and later) with the chrome://flags/#canvas-draw-element flag enabled.
The API is unstable - Chrome may change the API or even remove it in the future.

Nesting <HtmlInCanvas> inside another <HtmlInCanvas> is not supported. Chrome would only display the outer effect, so this is invalid in Remotion. It will throw an error.
If you need to combine multiple effects, try to merge them into a single onPaint callback.

Rendering​

From v4.0.455, render is supported locally via npx remotion render and Studio, on Lambda, on Vercel and through server-side rendering APIs.

We compiled a version of Chrome Canary and made it the default, and enabled the flag for you.

If your effect uses a WebGL shader, pass --gl=angle to make the render work:

npx remotion render --gl=angle

Set it as the default in remotion.config.ts so Studio and CLI renders pick it up as a default:

remotion.config.ts
Config.setChromiumOpenGlRenderer('angle');

If your machine has no GPU, we recommend --gl=swangle instead (default on Lambda).

AI agents​

Remotion publishes Agent Skills that teach AI agents like Claude Code, Codex and Cursor how to use <HtmlInCanvas> correctly — including the onInit / onPaint lifecycle, the --gl=angle flag and the no-nesting rule.

Install them with:

npx skills add remotion-dev/skills

Leveraging HTML-in-canvas for client-side rendering​

Not directly related, but also leveraging the same technology is the HTML-in-canvas option in @remotion/web-renderer.

When enabled, the client-side renderer uses HTML-in-canvas to capture full frames in the browser, which can produce more accurate output than the default DOM compositor.

This mode cannot render compositions that contain <HtmlInCanvas> elements, because doing so would nest HTML-in-canvas captures, which Chrome does not support.

See also​