remotion-dev/remotion · error · Error

Could not create an HTML-in-canvas OffscreenCanvas 2D contex

Error message

Could not create an HTML-in-canvas OffscreenCanvas 2D context.

What it means

After the main whole-page 2D context is validated, the recorder creates a small `OffscreenCanvas(2, 2)` for intermediate capture and fetches its 2D context, again requiring `drawElementImage` to be a function. If the OffscreenCanvas 2D context is null or lacks `drawElementImage`, the wrapped page is restored and the error is thrown. This is a secondary capability check distinct from the main-canvas check.

Source

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

			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.',
			);
		}

		this.#captureContext = captureContext;
		try {
			const sourceSize = this.#wrapped.getSize();
			this.#assertValidSize(sourceSize.width, sourceSize.height);
			syncDisplayCanvasSize(
				this.#wrapped.canvas,
				sourceSize.width,
				sourceSize.height,
				window.devicePixelRatio,
			);
			const initialCrop = this.#resolveCrop(
				sourceSize.width,
				sourceSize.height,
			) ?? {left: 0, top: 0, ...sourceSize};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Update to a Chrome build that supports `drawElementImage` on OffscreenCanvas 2D contexts (newer Chrome Canary).
2. Ensure the `Canvas Draw Element` flag is enabled (chrome://flags/#canvas-draw-element) and restart Chrome.
3. Free GPU resources / close other tabs if the OffscreenCanvas context is failing to allocate.
4. If unresolved, report the browser version — this indicates an incomplete platform implementation.

function supportsOffscreenDrawElement(): boolean {
  try {
    const oc = new OffscreenCanvas(2, 2);
    const ctx = oc.getContext('2d') as any;
    return !!ctx && typeof ctx.drawElementImage === 'function';
  } catch {
    return false;
  }
}

const hasOffscreenDrawElementImage = (): boolean => {
  const ctx = new OffscreenCanvas(1,1).getContext('2d') as any;
  return !!ctx && typeof ctx.drawElementImage === 'function';
};

try {
  await session.start();
} catch (e) {
  if (e instanceof Error && /OffscreenCanvas 2D context/.test(e.message)) {
    adviseBrowserUpgrade();
  }
  throw e;
}

When it happens

Trigger: The browser supports `drawElementImage` on a regular `HTMLCanvasElement` 2D context but not on an `OffscreenCanvas` 2D context (partial/experimental implementation). Also thrown if `OffscreenCanvas.getContext('2d')` returns null because the context is lost or unavailable.

Common situations: A Chrome version where the `Canvas Draw Element` flag enables the API for on-screen canvases but OffscreenCanvas support is missing; hardware/resource limits causing OffscreenCanvas 2D context allocation to fail; running in a worker context without OffscreenCanvas 2D support.

Related errors

• The required HTML-in-canvas APIs are unavailable. Open chrom
• 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/4faec92472585762. Report an issue: GitHub.