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 inside linearGradientTint setup. The 2D context exists solely to parse the `startColor`/`endColor` strings via the browser color parser; it is independent of the WebGL rendering path.

Source

Thrown at packages/effects/src/linear-gradient-tint.ts:318

	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 textureSource = createRgbaTexture(gl);

	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,
		uniforms: {
			uSource: gl.getUniformLocation(program, 'uSource'),
			uStart: gl.getUniformLocation(program, 'uStart'),
			uEnd: gl.getUniformLocation(program, 'uEnd'),
			uStartColor: gl.getUniformLocation(program, 'uStartColor'),
			uEndColor: gl.getUniformLocation(program, 'uEndColor'),
			uAmount: gl.getUniformLocation(program, 'uAmount'),
		},
		colorCtx,
		cachedStartColor: '',

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. In jsdom tests, install a canvas polyfill or skip the effect under test.
2. Close unused canvas contexts in long-running apps to stay under the browser cap.
3. Run the effect in a full browser engine (Chromium) render worker.
4. Relax sandbox/CSP so 2D canvas is available.

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

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

When it happens

Trigger: Runtime without a 2D canvas implementation (jsdom without a polyfill); per-page canvas context cap exceeded; sandbox/CSP disabling 2D canvas.

Common situations: jsdom unit tests lacking a CanvasRenderingContext2D polyfill; long-lived pages hitting the 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/ae9e1caba509fdca. Report an issue: GitHub.