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

Thrown when a 1x1 helper canvas's `getContext('2d', {willReadFrequently:true})` returns null. This offscreen 2D context exists only to parse the effect's `color` string into RGBA via the browser color parser; it has nothing to do with the WebGL output path.

Source

Thrown at packages/effects/src/light-trail/light-trail-runtime.ts:145

		throw new Error('Failed to create WebGL buffer');
	}

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

	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(1);
	gl.vertexAttribPointer(1, 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,
		textureSource: createRgbaTexture(gl),
		uniforms: {
			uSource: gl.getUniformLocation(program, 'uSource'),
			uDirection: gl.getUniformLocation(program, 'uDirection'),
			uTexelSize: gl.getUniformLocation(program, 'uTexelSize'),
			uColor: gl.getUniformLocation(program, 'uColor'),
			uDistance: gl.getUniformLocation(program, 'uDistance'),
			uIntensity: gl.getUniformLocation(program, 'uIntensity'),
			uDecay: gl.getUniformLocation(program, 'uDecay'),
			uThreshold: gl.getUniformLocation(program, 'uThreshold'),
			uSamples: gl.getUniformLocation(program, 'uSamples'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. In jsdom tests, install a canvas polyfill (e.g. `canvas` npm package configured for jsdom) or skip this effect.
2. Close unused canvases/contexts in long-running apps to stay under the browser context cap.
3. Relax the sandbox/CSP so 2D canvas is available, or run the effect in a non-sandboxed render worker.
4. Ensure the render runtime is a real browser engine (Chromium) and not a minimal DOM shim.

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

const canParseColors = (): boolean => {
  try {
    return !!document.createElement('canvas').getContext('2d');
  } catch {
    return false;
  }
};

When it happens

Trigger: Running in an environment without a 2D canvas implementation (some test/jsdom setups); browser limits on total canvas contexts exceeded; a hardened CSP/security flag disabling 2D canvas.

Common situations: jsdom-based unit tests that do not polyfill CanvasRenderingContext2D; extremely long-lived pages hitting the per-page canvas context cap; sandboxed iframes blocking canvas.

Related errors

• Failed to acquire 2D context for color parsing
• WebGPU is not available in this environment for canvas effec
• <Solid>: `pixelDensity` must be a positive finite number. Re
• WebGL context was lost during canvas effect rendering. This
• WebGPU is not available in this environment

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