{"record":{"id":"fff25c362cdad3f5","repo":"remotion-dev/remotion","slug":"failed-to-acquire-2d-context-for-translate-effect","errorCode":null,"errorMessage":"Failed to acquire 2D context for translate effect. The canvas may have been assigned a different context type.","messagePattern":"Failed to acquire 2D context for translate effect\\. The canvas may have been assigned a different context type\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/effects/src/translate/index.ts","lineNumber":109,"sourceCode":"\nconst applyTranslate = ({\n\tsource,\n\ttarget,\n\twidth,\n\theight,\n\tx,\n\ty,\n}: {\n\treadonly source: CanvasImageSource;\n\treadonly target: HTMLCanvasElement;\n\treadonly width: number;\n\treadonly height: number;\n\treadonly x: number;\n\treadonly y: number;\n}) => {\n\tconst ctx = target.getContext('2d');\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t'Failed to acquire 2D context for translate effect. The canvas may have been assigned a different context type.',\n\t\t);\n\t}\n\n\tctx.clearRect(0, 0, width, height);\n\tctx.drawImage(source, x, y, width, height);\n};\n\nexport const xyTranslate = createEffect<XyTranslateParams, null>({\n\ttype: 'dev.remotion.effects.xyTranslate',\n\tlabel: 'xyTranslate()',\n\tdocumentationLink: 'https://www.remotion.dev/docs/effects/xy-translate',\n\tbackend: '2d',\n\tcalculateKey: (params) => {\n\t\tconst r = resolveXyTranslate(params);\n\t\treturn `xy-translate-${r.x}-${r.y}`;\n\t},\n\tsetup: () => null,","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/translate/index.ts#L91-L127","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  xyTranslate({...params});\n} catch (e) {\n  if (/Failed to acquire 2D context for translate/.test((e as Error).message)) {\n    // target canvas has a foreign context or 2D is unavailable; skip effect\n    return;\n  }\n  throw e;\n}","preventionTips":["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."],"tags":["translate","canvas2d","context","apply","backend"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}