{"record":{"id":"9d9dd762f9cca33b","repo":"remotion-dev/remotion","slug":"failed-to-acquire-2d-context-for-tint-effect-the","errorCode":null,"errorMessage":"Failed to acquire 2D context for tint effect. The canvas may have been assigned a different context type.","messagePattern":"Failed to acquire 2D context for tint effect\\. The canvas may have been assigned a different context type\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/effects/src/tint.ts","lineNumber":74,"sourceCode":"};\n\n// Tints the source with a flat color. `amount` controls the blend strength\n// (0 = no tint, 1 = full color over opaque pixels). Operates on the 2D\n// backend; tinting respects the source's alpha mask.\nexport const tint = createEffect<TintParams, null>({\n\ttype: 'dev.remotion.effects.tint',\n\tlabel: 'tint()',\n\tdocumentationLink: 'https://www.remotion.dev/docs/effects/tint',\n\tbackend: '2d',\n\tcalculateKey: (params) => {\n\t\tconst r = resolve(params);\n\t\treturn `tint-${r.color}-${r.amount}`;\n\t},\n\tsetup: () => null,\n\tapply: ({source, target, width, height, params}) => {\n\t\tconst ctx = target.getContext('2d');\n\t\tif (!ctx) {\n\t\t\tthrow new Error(\n\t\t\t\t'Failed to acquire 2D context for tint effect. The canvas may have been assigned a different context type.',\n\t\t\t);\n\t\t}\n\n\t\tconst r = resolve(params);\n\t\tconst amount = Math.max(0, Math.min(1, r.amount));\n\n\t\tctx.clearRect(0, 0, width, height);\n\t\tctx.globalAlpha = 1;\n\t\tctx.globalCompositeOperation = 'source-over';\n\t\tctx.drawImage(source, 0, 0, width, height);\n\n\t\t// `source-atop` only paints inside non-transparent regions of the source,\n\t\t// so the tint respects the source's alpha mask.\n\t\tctx.globalAlpha = amount;\n\t\tctx.globalCompositeOperation = 'source-atop';\n\t\tctx.fillStyle = r.color;\n\t\tctx.fillRect(0, 0, width, height);","sourceCodeStart":56,"sourceCodeEnd":92,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/tint.ts#L56-L92","documentation":"The tint effect (2D backend) calls `target.getContext('2d')` on the effect's target canvas at the start of `apply`. If this returns `null`, the effect cannot draw. Because the target canvas is provided by the rendering pipeline and the effect declares `backend: '2d'`, a null 2D context normally means the canvas was already assigned a different (e.g. webgl) context, or the 2D backend is unavailable in the environment.","triggerScenarios":"The target canvas already requested a `'webgl'` or `'webgl2'` context (a canvas can only have one context type); the 2D canvas backend is unavailable in the runtime; a pipeline bug passed a canvas already bound to a different context.","commonSituations":"Mixing 2D and webgl2 effects on the same underlying canvas where the pipeline does not isolate them; a custom render host reusing canvas elements across context types; an environment with Canvas 2D disabled.","solutions":["Ensure tint (a `backend: '2d'` effect) is not combined on the same canvas pass as a webgl2 effect that already acquired a GL context.","Run in an environment with full Canvas 2D support (standard browser or headless Chrome).","If building a custom pipeline, give each effect backend a fresh canvas rather than reusing one across context types.","Report to maintainers if this occurs in stock Remotion Studio/render without custom canvas sharing."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  tint({...params});\n} catch (e) {\n  if (/Failed to acquire 2D context for tint/.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 mix `backend: '2d'` effects with webgl2 effects on the same canvas pass — ensure pipeline isolation.","Run in an environment with Canvas 2D support (standard browser / headless Chrome).","In custom pipelines, allocate a fresh canvas per backend rather than reusing one across context types."],"tags":["tint","canvas2d","context","apply","backend"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}