1# Using `<HtmlInCanvas>` in Remotion
2 
3Renders children into a `<canvas>` so you can post-process them with the Canvas 2D API or WebGL.
4 
5Only works in Chrome 149+ with the `chrome://flags/#canvas-draw-element` flag enabled.  
6Give the user a notice.
7 
8## Nesting
9 
10Do not nest `<HtmlInCanvas>` inside another `<HtmlInCanvas>`. Remotion throws:
11 
12```
13<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.
14```
15 
16## Enabling WebGL during renders
17 
18If you make use of WebGL during renders, you need to enable it:
19 
20From the CLI:
21 
22```bash
23npx remotion render --gl=angle
24```
25 
26Set it as the default for Studio and CLI (advised):
27 
28```ts
29import { Config } from "@remotion/cli/config";
30 
31Config.setChromiumOpenGlRenderer("angle");
32```
33 
34## Basic usage
35 
36By default, draws to canvas with no effect applied:
37 
38```tsx
39import { HtmlInCanvas } from "remotion";
40 
41export const MyComp = () => {
42  return (
43    <HtmlInCanvas width={1280} height={720}>
44      <div style={{ fontSize: 80 }}>Hello</div>
45    </HtmlInCanvas>
46  );
47};
48```
49 
50## 2D effect with `onPaint`
51 
52`onPaint` runs whenever the content updates. Call `ctx.drawElementImage(elementImage, 0, 0)` to draw the captured DOM, and assign the returned transform to `element.style.transform` so DOM selection still aligns with the painted output.
53 
54```tsx
55import {
56  AbsoluteFill,
57  HtmlInCanvas,
58  type HtmlInCanvasOnPaint,
59  useCurrentFrame,
60  useVideoConfig,
61} from "remotion";
62import { useCallback } from "react";
63 
64export const Blur = () => {
65  const frame = useCurrentFrame();
66  const { width, height, fps } = useVideoConfig();
67 
68  const onPaint: HtmlInCanvasOnPaint = useCallback(
69    ({ canvas, element, elementImage }) => {
70      const ctx = canvas.getContext("2d");
71      if (!ctx) throw new Error("Failed to acquire 2D context");
72 
73      const blurPx = 4 + 18 * (0.5 + 0.5 * Math.sin((frame / fps) * Math.PI));
74 
75      ctx.reset();
76      ctx.filter = `blur(${blurPx}px)`;
77      const transform = ctx.drawElementImage(elementImage, 0, 0);
78      element.style.transform = transform.toString();
79    },
80    [frame, fps],
81  );
82 
83  return (
84    <HtmlInCanvas width={width} height={height} onPaint={onPaint}>
85      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 120 }}>
86        <h1>Hello</h1>
87      </AbsoluteFill>
88    </HtmlInCanvas>
89  );
90};
91```
92 
93## WebGL effects
94 
95For WebGL, set up the context, program, and texture in `onInit` and return a cleanup function. Inside `onPaint`, upload the captured DOM with `gl.texElementImage2D(...)` and draw.
96 
97```tsx
98const onInit: HtmlInCanvasOnInit = useCallback(({ canvas }) => {
99  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true });
100  if (!gl) {
101    throw new Error(
102      "WebGL2 unavailable. Try rendering with the --gl=angle option. See https://remotion.dev/docs/gl-options.",
103    );
104  }
105  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
106  // compile program, create texture, set up VAO...
107  return () => {
108    // delete program, texture, buffers...
109  };
110}, []);
111 
112const onPaint: HtmlInCanvasOnPaint = useCallback(({ elementImage }) => {
113  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
114  gl.drawArrays(gl.TRIANGLES, 0, 6);
115}, []);
116```
117 
118For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.
119 
120## Async `onPaint`
121 
122`onPaint` may be `async`. Remotion holds the frame open via `delayRender()` until the promise resolves. Useful for multi-pass effects with `createImageBitmap`.
123