{"record":{"id":"45303e562483998c","repo":"remotion-dev/remotion","slug":"failed-to-acquire-2d-context-for-color-parsing-45303e","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":"critical","filePath":"packages/effects/src/liquid-contours.ts","lineNumber":353,"sourceCode":"\tgl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\tgl.bufferData(\n\t\tgl.ARRAY_BUFFER,\n\t\tnew Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),\n\t\tgl.STATIC_DRAW,\n\t);\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\tgl.bindVertexArray(null);\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\treturn {\n\t\tgl,\n\t\tprogram,\n\t\tvao,\n\t\tvbo,\n\t\tcolorCtx,\n\t\tuniforms: {\n\t\t\tuResolution: gl.getUniformLocation(program, 'uResolution'),\n\t\t\tuFirstColor: gl.getUniformLocation(program, 'uFirstColor'),\n\t\t\tuSecondColor: gl.getUniformLocation(program, 'uSecondColor'),\n\t\t\tuSpacing: gl.getUniformLocation(program, 'uSpacing'),\n\t\t\tuScale: gl.getUniformLocation(program, 'uScale'),\n\t\t\tuComplexity: gl.getUniformLocation(program, 'uComplexity'),\n\t\t\tuSmoothness: gl.getUniformLocation(program, 'uSmoothness'),\n\t\t\tuSeed: gl.getUniformLocation(program, 'uSeed'),\n\t\t\tuOffset: gl.getUniformLocation(program, 'uOffset'),\n\t\t\tuPhase: gl.getUniformLocation(program, 'uPhase'),\n\t\t},","sourceCodeStart":335,"sourceCodeEnd":371,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/liquid-contours.ts#L335-L371","documentation":"A plain Error thrown inside setup in the Liquid contours effect when a 1x1 helper canvas's getContext('2d', {willReadFrequently:true}) returns null. The effect uses this offscreen 2D context to parse firstColor/secondColor strings into RGBA via fillStyle + getImageData, so color setup cannot proceed without it.","triggerScenarios":"document.createElement('canvas').getContext('2d') returns null — environment caps 2D contexts, disables canvas, or lacks CanvasRenderingContext2D (e.g. a non-browser DOM shim). Independent of the color values themselves.","commonSituations":"Headless/test environments with canvas disabled; too many live 2D contexts in the page; hardened browser profiles; SSR/snapshot code that accidentally runs effect setup outside a browser.","solutions":["Run the effect inside a real browser context (Remotion renders via headless Chromium).","Reduce simultaneously live 2D canvas contexts.","Confirm 2D canvas is not disabled by the browser/security config."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":"function has2dContext(): boolean {\n  const c = document.createElement('canvas');\n  return !!c.getContext('2d', {willReadFrequently: true});\n}","typeGuard":null,"tryCatchPattern":"try {\n  liquidContours(...);\n} catch (err) {\n  if (err instanceof Error && /2D context for color parsing/.test(err.message)) {\n    // run in a real browser / enable 2D canvas, then retry\n  } else throw err;\n}","preventionTips":["Run Remotion renders in real headless Chromium, not a DOM shim.","Do not disable 2D canvas in hardened browser profiles.","Reduce the number of simultaneously live 2D contexts."],"tags":["webgl2","liquid-contours-effect","canvas2d","environment","color-parsing"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}