remotion-dev/remotion · error · Error

WebGL context was lost during canvas effect rendering. This

Error message

WebGL context was lost during canvas effect rendering. This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). Try reducing concurrency or increasing the Lambda function memory.

What it means

The canvas effect pool tracks WebGL contexts that have fired 'webglcontextlost' (a browser signal that the GPU resources were reclaimed, common under memory pressure or in headless mode). Before each effect pass, assertContextNotLost checks the canvas and throws if its context was lost, so rendering fails fast rather than silently producing blank frames.

Source

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

	}

	public getPair(backend: Backend): CanvasPair {
		const existing = this.pairs.get(backend);
		if (existing) {
			return existing;
		}

		const pair = [
			this.allocateCanvas(backend),
			this.allocateCanvas(backend),
		] as const;
		this.pairs.set(backend, pair);
		return pair;
	}

	public assertContextNotLost(canvas: HTMLCanvasElement): void {
		if (this.lostContexts.has(canvas)) {
			throw new Error(
				'WebGL context was lost during canvas effect rendering. ' +
					'This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). ' +
					'Try reducing concurrency or increasing the Lambda function memory.',
			);
		}
	}

	private allocateCanvas(backend: Backend): HTMLCanvasElement {
		const canvas = document.createElement('canvas');
		canvas.width = this.width;
		canvas.height = this.height;

		switch (backend) {
			case '2d': {
				const ctx = canvas.getContext('2d', {
					colorSpace: 'srgb',
				});
				if (!ctx) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce render concurrency (fewer parallel frames / Chrome tabs) on Lambda or locally.
2. Increase Lambda function memory (which also raises GPU/CPU).
3. Reduce the number of simultaneous WebGL effects or lower canvas resolution.

Example fix

// before (CLI)
remotion render MyComp out.mp4 --concurrency=16

// after
remotion render MyComp out.mp4 --concurrency=4

// before render: size concurrency and memory to the workload
const concurrency = Math.min(4, safeConcurrency);
const memoryMB = 2048; // or higher on Lambda

try {
  await renderMedia(...);
} catch (e) {
  if (String(e?.message).includes('WebGL context was lost')) {
    // reduce concurrency and retry once
  } else throw e;
}

When it happens

Trigger: Running many WebGL-based effects concurrently on Remotion Lambda or in a low-memory headless Chrome, where the GPU process reclaims contexts. Also triggered by driver crashes, too many simultaneous WebGL contexts, or insufficient Lambda memory.

Common situations: High concurrency Lambda renders with WebGL-heavy effect chains; local headless rendering with limited GPU memory; stacking many canvas/webgl2 effects in one composition.

Related errors

• No WebGPU adapter available
• WebGPU is not available in this environment
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create WebGL shader

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