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

A plain Error thrown inside setupLines when a 1x1 helper canvas's getContext('2d', {willReadFrequently:true}) returns null. The Lines effect uses this offscreen 2D context to parse color strings into RGBA via fillStyle + getImageData, so it cannot translate the palette without it.

Source

Thrown at packages/effects/src/lines.ts:421

	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.NEAREST),
		colorCtx,
		uniforms: {
			uSource: gl.getUniformLocation(program, 'uSource'),
			uPalette: gl.getUniformLocation(program, 'uPalette'),
			uResolution: gl.getUniformLocation(program, 'uResolution'),
			uNumColors: gl.getUniformLocation(program, 'uNumColors'),
			uDirection: gl.getUniformLocation(program, 'uDirection'),
			uThickness: gl.getUniformLocation(program, 'uThickness'),
			uSpacing: gl.getUniformLocation(program, 'uSpacing'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure the render runs in a real browser context (Remotion renders via headless Chromium by default).
2. Reduce the number of simultaneously alive 2D canvas contexts.
3. If using a custom browser config, confirm 2D canvas is not disabled.

function has2dContext(): boolean {
  const c = document.createElement('canvas');
  return !!c.getContext('2d', {willReadFrequently: true});
}

try {
  lines(...);
} catch (err) {
  if (err instanceof Error && /2D context for color parsing/.test(err.message)) {
    // run in a real browser / enable 2D canvas, then retry
  } else throw err;
}

When it happens

Trigger: document.createElement('canvas').getContext('2d') returns null — happens when the environment limits 2D canvas contexts, has a hardened browser config that disables 2D canvases, or is a non-browser DOM shim lacking CanvasRenderingContext2D.

Common situations: Headless/test environments with canvas disabled; browsers with too many live 2D contexts; security-hardened browser profiles; SSR/snapshot runs that accidentally execute effect setup outside a real browser.

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 acquire 2D context for color parsing
• Failed to create WebGL shader

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