remotion-dev/remotion · critical · Error

Failed to acquire 2D context for translate effect. The canva

Error message

Failed to acquire 2D context for translate effect. The canvas may have been assigned a different context type.

What it means

The translate effects (`xyTranslate`/`uvTranslate`, both 2D backend) call `target.getContext('2d')` inside `applyTranslate` at the start of `apply`. If it returns `null`, the effect cannot draw. The target canvas is supplied by the rendering pipeline; a null context usually means the canvas already holds a different (e.g. webgl) context, or the 2D backend is unavailable.

Source

Thrown at packages/effects/src/translate/index.ts:109

const applyTranslate = ({
	source,
	target,
	width,
	height,
	x,
	y,
}: {
	readonly source: CanvasImageSource;
	readonly target: HTMLCanvasElement;
	readonly width: number;
	readonly height: number;
	readonly x: number;
	readonly y: number;
}) => {
	const ctx = target.getContext('2d');
	if (!ctx) {
		throw new Error(
			'Failed to acquire 2D context for translate effect. The canvas may have been assigned a different context type.',
		);
	}

	ctx.clearRect(0, 0, width, height);
	ctx.drawImage(source, x, y, width, height);
};

export const xyTranslate = createEffect<XyTranslateParams, null>({
	type: 'dev.remotion.effects.xyTranslate',
	label: 'xyTranslate()',
	documentationLink: 'https://www.remotion.dev/docs/effects/xy-translate',
	backend: '2d',
	calculateKey: (params) => {
		const r = resolveXyTranslate(params);
		return `xy-translate-${r.x}-${r.y}`;
	},
	setup: () => null,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Ensure translate (a `backend: '2d'` effect) is not applied on a canvas that already has a GL context from another effect.
Run in an environment with full Canvas 2D support.
If building a custom pipeline, allocate a fresh canvas per backend rather than reusing one across context types.
Report to maintainers if this occurs in stock Remotion without custom canvas handling.

Defensive patterns

Strategy: try-catch

Try / catch

try {
  xyTranslate({...params});
} catch (e) {
  if (/Failed to acquire 2D context for translate/.test((e as Error).message)) {
    // target canvas has a foreign context or 2D is unavailable; skip effect
    return;
  }
  throw e;
}

Prevention

Do not combine `backend: '2d'` effects with webgl2 effects on the same canvas without pipeline isolation.
Run in an environment with Canvas 2D support.
In custom pipelines, give each backend its own canvas instead of reusing across context types.

When it happens

Trigger: The target canvas already acquired a `'webgl'`/`'webgl2'` context (only one context type per canvas); the 2D canvas backend is unavailable in the runtime; a pipeline bug reused a canvas across context types.

Common situations: Combining translate (2D) with webgl2 effects on the same canvas without pipeline isolation; a custom render host reusing canvas elements; an environment with Canvas 2D disabled.

Related errors

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