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 setupDropShadow when an offscreen 1x1 canvas's getContext('2d', {willReadFrequently: true}) returns null. The drop-shadow runtime uses this 2D context to parse the user's CSS color string into RGBA via the browser's color parser. A null 2D context is rare and typically signals an environment where 2D canvas acceleration is unavailable or the browser denied the context.

Source

Thrown at packages/effects/src/drop-shadow/drop-shadow-runtime.ts:204

	gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);

	gl.bindVertexArray(null);

	const textureSource = createRgbaTexture(gl);
	const textureShadowA = createRgbaTexture(gl);
	const textureShadowB = createRgbaTexture(gl);

	const framebuffer = gl.createFramebuffer();
	if (!framebuffer) {
		throw new Error('Failed to create WebGL framebuffer');
	}

	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,
		programExtract,
		programHorizontal,
		programVertical,
		programComposite,
		vao,
		vbo,
		textureSource,
		textureShadowA,
		textureShadowB,
		framebuffer,
		extract: {
			uSource: gl.getUniformLocation(programExtract, 'uSource'),
			uColor: gl.getUniformLocation(programExtract, 'uColor'),
			uOpacity: gl.getUniformLocation(programExtract, 'uOpacity'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce total canvas usage on the page to free a 2D context slot.
2. Update the browser / webview to a version with full Canvas2D support.
3. Disable browser extensions that block canvas reading and reload.
4. For headless rendering, ensure Chromium runs with GPU/software canvas enabled (not disabled).
5. Report a Remotion issue if it reproduces in a stock desktop browser.

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

if (!canvas2dAvailable()) {
  // omit drop-shadow() or pre-parse the color yourself and bypass the effect

try {
  state = setupDropShadow(canvas);
} catch (err) {
  if (err instanceof Error && /2D context/i.test(err.message)) {
    console.error('Canvas 2D unavailable for drop-shadow color parsing:', err.message);
    // fall back to a CSS box-shadow layer
  } else {
    throw err;
  }
}

When it happens

Trigger: The browser cannot provide a 2D canvas context for the tiny offscreen color-parsing canvas — usually because canvas contexts are exhausted, the page is in a degraded GPU mode, or the runtime is a non-browser environment without full Canvas2D support. Reached at the very end of setupDropShadow().

Common situations: Headless environments with limited canvas support; browser extensions blocking canvas; very high canvas-context counts; old browsers; some embedded webviews.

Related errors

• Failed to acquire 2D context for color parsing
• Failed to acquire 2D context for color parsing
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL texture

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