remotion-dev/remotion · error · Error

WebGPU is not available in this environment for canvas effec

Error message

WebGPU is not available in this environment for canvas effect

What it means

When allocating a scratch canvas for a 'webgpu'-backend effect, CanvasPool checks for navigator.gpu. WebGPU must be enabled in the browser/runtime; if navigator.gpu is absent (older browsers, headless Chrome without the WebGPU flag, or Node/non-browser environments), the pool throws because the WebGPU effect cannot run.

Source

Thrown at packages/core/src/effects/canvas-pool.ts:90

				if (!ctx) {
					throw createWebGL2ContextError('canvas effect');
				}

				canvas.addEventListener('webglcontextlost', (e) => {
					e.preventDefault();
					this.lostContexts.add(canvas);
				});
				canvas.addEventListener('webglcontextrestored', () => {
					this.lostContexts.delete(canvas);
				});

				ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
				return canvas;
			}

			case 'webgpu': {
				if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
					throw new Error(
						'WebGPU is not available in this environment for canvas effect',
					);
				}

				return canvas;
			}

			default: {
				const exhaustive: never = backend;
				throw new Error(`Unknown effect backend: ${exhaustive as string}`);
			}
		}
	}
}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Use a WebGPU-capable browser/runtime (recent Chrome with WebGPU enabled; for headless, launch with the appropriate flags).
2. Switch the effect to a webgl2 or 2d backend if the target environment lacks WebGPU.
3. Feature-detect navigator.gpu before mounting WebGPU effects and provide a fallback.

Example fix

// before
<Effect backend="webgpu" ... />

// after (feature-detect)
const backend = typeof navigator !== 'undefined' && 'gpu' in navigator ? 'webgpu' : 'webgl2';
<Effect backend={backend} ... />

const supportsWebGPU =
  typeof navigator !== 'undefined' && 'gpu' in navigator;
const backend = supportsWebGPU ? 'webgpu' : 'webgl2';

const supportsWebGPU = (): boolean =>
  typeof navigator !== 'undefined' && 'gpu' in navigator;

When it happens

Trigger: Using a WebGPU-based effect in a browser/runtime without WebGPU, headless Chrome launched without --enable-unsafe-webgpu / the WebGPU feature, or in SSR/Node where navigator is absent.

Common situations: Rendering on Lambda/headless Chrome that lacks WebGPU; older browser versions; effects authored for WebGPU running in a CI browser without flags.

Related errors

• WebGPU is not available in this environment
• No WebGPU adapter available
• Failed to acquire 2D context for color parsing
• Failed to acquire 2D context for color parsing
• <Solid>: `pixelDensity` must be a positive finite number. Re

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