remotion-dev/remotion · error · Error

The required HTML-in-canvas APIs are unavailable. Open…

Error message

The required HTML-in-canvas APIs are unavailable. Open chrome://flags/#canvas-draw-element, set Canvas Draw Element to Enabled, then fully quit and reopen the browser.

What it means

The Canvas Capture extension needs the experimental `Canvas Draw Element` Chrome feature, which provides `context.drawElementImage` and `canvas.captureElementImage`. After obtaining a 2D context for the wrapped whole-page canvas, the code checks that both the context exists and that `drawElementImage`/`captureElementImage` are present as functions. If the flag is disabled (or the browser lacks the API), capture setup aborts and the wrapped page is restored before throwing.

Solutions

1. Navigate to chrome://flags/#canvas-draw-element, set it to Enabled, then fully quit and reopen Chrome.
2. Use Chrome Canary or the pinned Chrome for Testing build required by the extension (see install-canvas-capture-browser skill).
3. Confirm the browser is Chromium-based and recent enough to ship `HTMLCanvasElement.prototype.captureElementImage`.
4. Restart the browser completely (quit all windows/processes) after enabling the flag.

function supportsHtmlInCanvas(canvas: HTMLCanvasElement): boolean {
  const ctx = canvas.getContext('2d') as any;
  return !!ctx && typeof ctx.drawElementImage === 'function'
    && typeof canvas.captureElementImage === 'function';
}

const hasDrawElementImage = (c: HTMLCanvasElement): boolean =>
  typeof (c as any).captureElementImage === 'function';

try {
  session = new CaptureSession(/*...*/);
} catch (e) {
  if (e instanceof Error && /HTML-in-canvas APIs are unavailable/.test(e.message)) {
    showEnableFlagInstructions();
  }
  throw e;
}

When it happens

Trigger: Starting a canvas capture in a Chrome build where `chrome://flags/#canvas-draw-element` is set to Disabled or Default, or in a non-Chromium browser that does not implement the HTML-in-canvas APIs. The check runs at `CaptureSession` construction right after `wrapWholePage()`.

Common situations: Using a stock Chrome stable build without enabling the flag; Chrome was updated and reset the flag to default; running in a browser that never shipped `canvas.captureElementImage`; not fully quitting/reopening Chrome after toggling the flag.

Related errors

• Could not create an HTML-in-canvas OffscreenCanvas 2D…
• Could not get 2D canvas context
• Canvas capture scale must be greater than 0.
• Could not create a 2D canvas context.
• Could not determine animated image duration

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/9aa1e4da4543ec93. Report an issue: GitHub.

Appendix: source

Thrown at packages/canvas-capture-extension/src/capture.ts:249

		this.#scale = scale;
		this.#format = format;
		this.#crop = crop;
		this.#matteColors = [
			'#fff',
			window.getComputedStyle(document.documentElement).backgroundColor,
			window.getComputedStyle(document.body).backgroundColor,
		];
		this.#wrapped = wrapWholePage();
		const context = this.#wrapped.canvas.getContext(
			'2d',
		) as HtmlInCanvasRenderingContext2D | null;
		if (
			!context ||
			typeof context.drawElementImage !== 'function' ||
			typeof this.#wrapped.canvas.captureElementImage !== 'function'
		) {
			this.#wrapped.restore();
			throw new Error(
				'The required HTML-in-canvas APIs are unavailable. Open chrome://flags/#canvas-draw-element, set Canvas Draw Element to Enabled, then fully quit and reopen the browser.',
			);
		}

		this.#context = context;
		this.#captureCanvas = new OffscreenCanvas(2, 2);
		const captureContext = this.#captureCanvas.getContext(
			'2d',
		) as HtmlInCanvasOffscreenRenderingContext2D | null;
		if (
			!captureContext ||
			typeof captureContext.drawElementImage !== 'function'
		) {
			this.#wrapped.restore();
			throw new Error(
				'Could not create an HTML-in-canvas OffscreenCanvas 2D context.',
			);
		}

View on GitHub (pinned to 78fe4bb3fd)