remotion-dev/remotion · error · Error

Could not get 2D canvas context

Error message

Could not get 2D canvas context

What it means

Thrown when OffscreenCanvas.getContext('2d') returns null inside the canvas-capture video processor. The 2D context is required to drawImage the source frame with mirroring/flipping before re-encoding; without it, sample processing cannot continue.

Source

Thrown at packages/convert/app/lib/canvas-capture-conversion.ts:241

	return {
		process: async (sample: VideoSample) => {
			const moments = getCanvasCaptureSampleMoments({
				timestamp: sample.timestamp,
				duration: sample.duration,
				cursorStateChanges,
			});
			const sourceFrame = sample.toVideoFrame();
			const outputSamples: VideoSample[] = [];

			try {
				for (const moment of moments) {
					const canvas = new OffscreenCanvas(
						sample.displayWidth,
						sample.displayHeight,
					);
					const context = canvas.getContext('2d');
					if (!context) {
						throw new Error('Could not get 2D canvas context');
					}

					context.translate(
						mirrorHorizontal ? sample.displayWidth : 0,
						mirrorVertical ? sample.displayHeight : 0,
					);
					context.scale(mirrorHorizontal ? -1 : 1, mirrorVertical ? -1 : 1);
					context.drawImage(
						sourceFrame,
						0,
						0,
						sample.displayWidth,
						sample.displayHeight,
					);

					const cursor = findCanvasCaptureCursorAtTime(
						mouseMovements,
						moment.cursorLookupTimestamp,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Run Convert in a current desktop Chrome/Edge where OffscreenCanvas 2D is fully supported.
2. Detect getContext('2d') === null up front and show a 'browser unsupported' message instead of starting the conversion.
3. Free other GPU/canvas contexts before allocating to avoid resource exhaustion.

Example fix

// before
const context = canvas.getContext('2d');
if (!context) throw new Error('Could not get 2D canvas context');

// after
const context = canvas.getContext('2d');
if (!context) {
  throw new Error('This browser cannot provide a 2D canvas context. Use the latest Chrome or Edge.');
}

const supported = typeof OffscreenCanvas !== 'undefined'
  && (() => { try { return new OffscreenCanvas(1,1).getContext('2d') != null; } catch { return false; } })();
if (!supported) { showError('Use the latest Chrome or Edge to convert canvas captures.'); return; }

function supportsOffscreen2d(): boolean {
  if (typeof OffscreenCanvas === 'undefined') return false;
  try {
    const c = new OffscreenCanvas(1, 1);
    return c.getContext('2d') !== null;
  } catch { return false; }
}

try {
  await process(sample);
} catch (e) {
  if (e.message === 'Could not get 2D canvas context') showUnsupportedBrowser();
  else throw e;
}

When it happens

Trigger: Running in an environment where OffscreenCanvas exists but 2D context is unavailable (some headless/embedded browsers, hardened contexts, or memory pressure causing context allocation to fail). Also possible if OffscreenCanvas is polyfilled incompletely.

Common situations: Headless browser automation without GPU/2D canvas support; very low memory causing context creation to fail; older Safari without full OffscreenCanvas 2D support; browser privacy/incognito restrictions.

Related errors

• No supported configs
• Unsupported rotation: ${rotation}
• The required HTML-in-canvas APIs are unavailable. Open chrom
• Could not create an HTML-in-canvas OffscreenCanvas 2D contex
• Live streams are not currently supported by Remotion. Sorry!

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