{"record":{"id":"de944504b7eb9b11","repo":"remotion-dev/remotion","slug":"failed-to-acquire-2d-context-for-color-parsing-de9445","errorCode":null,"errorMessage":"Failed to acquire 2D context for color parsing","messagePattern":"Failed to acquire 2D context for color parsing","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/zigzag.ts","lineNumber":463,"sourceCode":"\n\tgl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\tgl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n\n\tconst aPos = gl.getAttribLocation(program, 'aPos');\n\tconst aUv = gl.getAttribLocation(program, 'aUv');\n\tgl.enableVertexAttribArray(aPos);\n\tgl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);\n\tgl.enableVertexAttribArray(aUv);\n\tgl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);\n\n\tgl.bindVertexArray(null);\n\n\tconst colorCanvas = document.createElement('canvas');\n\tcolorCanvas.width = 1;\n\tcolorCanvas.height = 1;\n\tconst colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});\n\tif (!colorCtx) {\n\t\tthrow new Error('Failed to acquire 2D context for color parsing');\n\t}\n\n\treturn {\n\t\tgl,\n\t\tprogram,\n\t\tvao,\n\t\tvbo,\n\t\tsourceTexture: createTexture(gl, gl.LINEAR),\n\t\tpaletteTexture: createTexture(gl, gl.NEAREST),\n\t\tcolorCtx,\n\t\tuniforms: {\n\t\t\tuSource: gl.getUniformLocation(program, 'uSource'),\n\t\t\tuPalette: gl.getUniformLocation(program, 'uPalette'),\n\t\t\tuResolution: gl.getUniformLocation(program, 'uResolution'),\n\t\t\tuNumColors: gl.getUniformLocation(program, 'uNumColors'),\n\t\t\tuDirection: gl.getUniformLocation(program, 'uDirection'),\n\t\t\tuThickness: gl.getUniformLocation(program, 'uThickness'),\n\t\t\tuSpacing: gl.getUniformLocation(program, 'uSpacing'),","sourceCodeStart":445,"sourceCodeEnd":481,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/zigzag.ts#L445-L481","documentation":"Zigzag keeps a 1x1 2D canvas solely to parse CSS color strings into RGBA via CanvasRenderingContext2D; if canvas.getContext('2d', {willReadFrequently:true}) returns null it throws 'Failed to acquire 2D context for color parsing'. This is unrelated to the WebGL pipeline — it fails when the browser refuses another Canvas2D context (context limit, accelerated-2D-canvas disabled, or a degraded environment), preventing the effect from converting the colors palette to RGBA.","triggerScenarios":"setupZigzag creates document.createElement('canvas') sized 1x1 and calls getContext('2d', {willReadFrequently:true}); the browser returns null, so colorCtx is null and the effect throws during first-frame setup.","commonSituations":"A page that already holds many Canvas2D contexts hitting the browser's context cap; an environment where accelerated 2D canvas is disabled and software 2D is unavailable; headless browser with 2D-context creation broken; very long-lived Studio sessions leaking 2D contexts.","solutions":["Reduce the total number of canvas-using components/mounts on the page to stay under the browser's Canvas2D context limit.","Ensure the render browser has working 2D canvas (Remotion's bundled Chromium does); avoid flags that disable accelerated/software 2D canvas.","Restart long-lived Studio sessions that may have leaked 2D contexts.","If only WebGL is degraded but 2D also fails, treat the environment as GPU-unavailable and skip the effect."],"exampleFix":"// before: assumes a 2D context is always available\nimport {zigzag} from '@remotion/effects';\n<VideoEffects effects={[zigzag({colors: ['#ff0000','#00ff00']})]} />\n\n// after: skip the effect if even a basic 2D context cannot be obtained\nconst probe = document.createElement('canvas').getContext('2d');\n<VideoEffects effects={probe ? [zigzag({colors: ['#ff0000','#00ff00']})] : []} />","handlingStrategy":"try-catch","validationCode":"const probe = document.createElement('canvas').getContext('2d', {willReadFrequently: true});\nif (!probe) {\n  // 2D context unavailable: skip zigzag (it needs 2D canvas for color parsing)\n}","typeGuard":"const has2DContext = (): boolean =>\n  document.createElement('canvas').getContext('2d', {willReadFrequently: true}) != null;","tryCatchPattern":"try {\n  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;\n} catch (err) {\n  if (err instanceof Error && /2D context for color parsing/.test(err.message)) {\n    return <Video />; // environment cannot parse colors via canvas; skip effect\n  }\n  throw err;\n}","preventionTips":["Keep the number of canvas-using mounts low to avoid the browser's Canvas2D context cap.","Use Remotion's bundled Chromium which has working 2D canvas; avoid flags that disable software/accelerated 2D canvas.","Restart long-lived Studio sessions that may leak 2D contexts.","Probe a 2D context before applying zigzag in unknown environments."],"tags":["canvas","webgl","gpu","rendering","headless"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}