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

Zigzag keeps a 1x1 2D canvas solely to parse CSS color strings into RGBA via CanvasRenderingContext2D; if canvas.getContext('2d', {willReadFrequently:true}) returns null it throws 'Failed to acquire 2D context for color parsing'. This is unrelated to the WebGL pipeline — it fails when the browser refuses another Canvas2D context (context limit, accelerated-2D-canvas disabled, or a degraded environment), preventing the effect from converting the colors palette to RGBA.

Source

Thrown at packages/effects/src/zigzag.ts:463

	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. Reduce the total number of canvas-using components/mounts on the page to stay under the browser's Canvas2D context limit.
2. Ensure the render browser has working 2D canvas (Remotion's bundled Chromium does); avoid flags that disable accelerated/software 2D canvas.
3. Restart long-lived Studio sessions that may have leaked 2D contexts.
4. If only WebGL is degraded but 2D also fails, treat the environment as GPU-unavailable and skip the effect.

Example fix

// before: assumes a 2D context is always available
import {zigzag} from '@remotion/effects';
<VideoEffects effects={[zigzag({colors: ['#ff0000','#00ff00']})]} />

// after: skip the effect if even a basic 2D context cannot be obtained
const probe = document.createElement('canvas').getContext('2d');
<VideoEffects effects={probe ? [zigzag({colors: ['#ff0000','#00ff00']})] : []} />

const probe = document.createElement('canvas').getContext('2d', {willReadFrequently: true});
if (!probe) {
  // 2D context unavailable: skip zigzag (it needs 2D canvas for color parsing)
}

const has2DContext = (): boolean =>
  document.createElement('canvas').getContext('2d', {willReadFrequently: true}) != null;

try {
  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;
} catch (err) {
  if (err instanceof Error && /2D context for color parsing/.test(err.message)) {
    return <Video />; // environment cannot parse colors via canvas; skip effect
  }
  throw err;
}

When it happens

Trigger: setupZigzag creates document.createElement('canvas') sized 1x1 and calls getContext('2d', {willReadFrequently:true}); the browser returns null, so colorCtx is null and the effect throws during first-frame setup.

Common situations: A page that already holds many Canvas2D contexts hitting the browser's context cap; an environment where accelerated 2D canvas is disabled and software 2D is unavailable; headless browser with 2D-context creation broken; very long-lived Studio sessions leaking 2D contexts.

Related errors

• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create white balance texture
• Failed to create white balance vertex array
• Failed to create white balance vertex buffer

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