{"record":{"id":"4d3b1b12c094de9e","repo":"remotion-dev/remotion","slug":"failed-to-acquire-2d-context-for-color-parsing-4d3b1b","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/halftone-linear-gradient.ts","lineNumber":497,"sourceCode":"\n\t\tconst texture = gl.createTexture();\n\t\tif (!texture) {\n\t\t\tthrow new Error('Failed to create WebGL texture');\n\t\t}\n\n\t\tgl.bindTexture(gl.TEXTURE_2D, texture);\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n\t\tgl.bindTexture(gl.TEXTURE_2D, null);\n\n\t\tconst colorCanvas = document.createElement('canvas');\n\t\tcolorCanvas.width = 1;\n\t\tcolorCanvas.height = 1;\n\t\tconst colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});\n\t\tif (!colorCtx) {\n\t\t\tthrow new Error('Failed to acquire 2D context for color parsing');\n\t\t}\n\n\t\treturn {\n\t\t\tgl,\n\t\t\tprogram,\n\t\t\tvao,\n\t\t\tvbo,\n\t\t\ttexture,\n\t\t\tuSource: gl.getUniformLocation(program, 'uSource'),\n\t\t\tuResolution: gl.getUniformLocation(program, 'uResolution'),\n\t\t\tuFirstStopDotSize: gl.getUniformLocation(program, 'uFirstStopDotSize'),\n\t\t\tuSecondStopDotSize: gl.getUniformLocation(program, 'uSecondStopDotSize'),\n\t\t\tuFirstStopPosition: gl.getUniformLocation(program, 'uFirstStopPosition'),\n\t\t\tuSecondStopPosition: gl.getUniformLocation(\n\t\t\t\tprogram,\n\t\t\t\t'uSecondStopPosition',\n\t\t\t),\n\t\t\tuGridSize: gl.getUniformLocation(program, 'uGridSize'),","sourceCodeStart":479,"sourceCodeEnd":515,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/halftone-linear-gradient.ts#L479-L515","documentation":"Thrown in setup() of the halftone-linear-gradient effect when a freshly created 1x1 helper canvas fails to return a 2D context via getContext('2d', {willReadFrequently: true}). The effect uses this throwaway canvas only to parse CSS color strings into RGBA pixels that it uploads as the gradient stop colors. A null 2D context on a brand-new canvas is essentially impossible in a normal browser and signals a broken canvas implementation in the rendering environment.","triggerScenarios":"Running in a JS environment where CanvasRenderingContext2D is unavailable (a stripped-down headless shell, a non-browser runtime pretending to be one, or a Chromium build with 2D canvas disabled via command-line flags).","commonSituations":"Custom headless Chromium launched with --disable-2d-canvas or similar; an exotic embedder that provides WebGL2 but not 2D canvas; a broken Chromium for Testing build.","solutions":["Do not disable 2D canvas in the render browser — remove flags like --disable-2d-canvas from the Chromium launch arguments.","Use the Remotion-bundled headless shell, which ships with both 2D and WebGL canvas support enabled.","If the environment genuinely lacks 2D canvas, render on a different host."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"// Confirm the environment can produce a 2D context before relying on effects that parse colors this way.\nfunction environmentSupports2dCanvas(): boolean {\n  const c = document.createElement('canvas');\n  c.width = 1; c.height = 1;\n  return c.getContext('2d', { willReadFrequently: true }) !== null;\n}","typeGuard":null,"tryCatchPattern":"try {\n  // ...use halftoneLinearGradient()\n} catch (e) {\n  if (e instanceof Error && /Failed to acquire 2D context for color parsing/.test(e.message)) {\n    // the render browser has 2D canvas disabled; switch to a properly configured browser\n  } else throw e;\n}","preventionTips":["Do not launch the render browser with --disable-2d-canvas.","Prefer the Remotion-bundled headless shell, which enables 2D canvas.","Smoke-test getContext('2d') once at render start to fail fast."],"tags":["webgl","halftone-linear-gradient","canvas-2d","headless","environment"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}