remotion-dev/remotion · error · Error

Failed to acquire 2D context for color parsing

Error message

Failed to acquire 2D context for color parsing

What it means

Thrown by setupVignette when a freshly created 1x1 canvas's getContext('2d', {willReadFrequently: true}) returns null. Vignette uses this 2D context to parse the color string into RGBA each time the color changes. A null 2D context is rare and indicates an environment without 2D canvas support or an exhausted canvas/context budget.

Source

Thrown at packages/effects/src/vignette.ts:378

	}

	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 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'),
			uAmount: gl.getUniformLocation(program, 'uAmount'),
			uRadius: gl.getUniformLocation(program, 'uRadius'),
			uFeather: gl.getUniformLocation(program, 'uFeather'),
			uRoundness: gl.getUniformLocation(program, 'uRoundness'),
			uColor: gl.getUniformLocation(program, 'uColor'),
			uMode: gl.getUniformLocation(program, 'uMode'),
			uCenter: gl.getUniformLocation(program, 'uCenter'),
		},

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Run in a browser/headless Chrome that supports the 2D canvas context (the default for Chrome).
2. Reduce the number of simultaneously-live canvases/effects.
3. Update the browser/runtime to one with full canvas support.
4. If embedding in a restricted runtime, enable 2D canvas in its configuration.

Example fix

// before
const effect = vignette({amount: 0.6, color: '#000000'}); // 2D context missing

// after - fall back when the host lacks a 2D canvas
const effect = (() => {
  try { return vignette({amount: 0.6, color: '#000000'}); } catch { return null; }
})();

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

let effect = null;
try {
  effect = vignette({amount: 0.6, color: '#000000'});
} catch (err) {
  console.warn('vignette needs a 2D canvas for color parsing; skipping', err);
}

When it happens

Trigger: setupVignette creates an offscreen 1x1 canvas and asks for a 2D context; the host returns null. Happens in environments that disable 2D canvas, or when the browser's canvas/context budget is exhausted.

Common situations: Hardened/embedded runtimes that disable 2D canvas; too many live canvas contexts; very old or non-standard browser engines; some headless configurations that restrict 2D canvas.

Related errors

• WebGPU is not available in this environment for canvas effec
• 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

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