remotion-dev/remotion · critical · Error

Failed to acquire 2D context for color parsing

Error message

Failed to acquire 2D context for color parsing

What it means

During thermal vision effect `setup`, an internal offscreen 1x1 canvas is created to parse palette colors via the 2D API. If `canvas.getContext('2d', {willReadFrequently: true})` returns `null`, this error is thrown. This is unusual because a fresh offscreen canvas should always support a 2D context; failure typically indicates an environment where the 2D canvas backend is unavailable or blocked.

Source

Thrown at packages/effects/src/thermal-vision.ts:272

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

	const aPos = gl.getAttribLocation(program, 'aPos');
	const aUv = gl.getAttribLocation(program, 'aUv');
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(aUv);
	gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);

	gl.bindVertexArray(null);

	const colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;
	colorCanvas.height = 1;
	const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
	if (!colorCtx) {
		throw new Error('Failed to acquire 2D context for color parsing');
	}

	return {
		gl,
		program,
		vao,
		vbo,
		sourceTexture: createTexture(gl, gl.LINEAR),
		paletteTexture: createTexture(gl, gl.LINEAR),
		colorCtx,
		uniforms: {
			uSource: gl.getUniformLocation(program, 'uSource'),
			uPalette: gl.getUniformLocation(program, 'uPalette'),
			uPaletteLength: gl.getUniformLocation(program, 'uPaletteLength'),
			uAmount: gl.getUniformLocation(program, 'uAmount'),
		},
		cachedPaletteKey: '',
		palettePixelData: new Uint8Array(0),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Run in a standard browser or headless Chrome build that supports the Canvas 2D API.
2. If using a custom host/jsdom-like environment, ensure `HTMLCanvasElement.prototype.getContext` returns a real 2D context.
3. Verify no browser setting or extension is disabling canvas 2D rendering.
4. Update the browser/runtime to a version with full Canvas 2D support.

// Verify a 2D context can be obtained before relying on thermalVision.
const supportsCanvas2D = (): boolean => {
  try {
    return !!document
      .createElement('canvas')
      .getContext('2d', {willReadFrequently: true});
  } catch {
    return false;
  }
};
if (!supportsCanvas2D()) { /* thermalVision will fail; use fallback */ }

try {
  thermalVision({...params});
} catch (e) {
  if (/Failed to acquire 2D context for color parsing/.test((e as Error).message)) {
    console.error('Canvas 2D unavailable in this environment');
    renderFallbackFrame();
  } else throw e;
}

When it happens

Trigger: Running in an environment where the Canvas 2D backend is unavailable or disabled; a browser/JS engine configuration that denies 2D context creation; extremely constrained headless environments. The canvas is created with `document.createElement('canvas')` so it is not shared with the GL context.

Common situations: A JS runtime or browser build with the 2D canvas backend stripped/disabled; a custom rendering host that overrides `document.createElement` or `HTMLCanvasElement.getContext`; edge-case headless configurations.

Related errors

• Failed to acquire 2D context for color parsing
• Failed to acquire 2D context for color parsing
• Failed to acquire 2D context for color parsing
• Failed to create WebGL shader
• Failed to create WebGL program

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