remotion-dev/remotion · error · Error

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

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.

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)

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 contex
• Could not get 2D canvas context
• The display canvas would be ${displayWidth}×${displayHeight}
• The encoded frame would be ${outputSize.width}×${outputSize.
• No canvas recording was available to open.

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