{"record":{"id":"67dde801e5a9a70e","repo":"DavidHDev/react-bits","slug":"2d-context-not-available","errorCode":null,"errorMessage":"2D context not available","messagePattern":"2D context not available","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx","lineNumber":62,"sourceCode":"  enableRipples?: boolean;\n  rippleIntensityScale?: number;\n  rippleThickness?: number;\n  rippleSpeed?: number;\n  liquidWobbleSpeed?: number;\n  autoPauseOffscreen?: boolean;\n  speed?: number;\n  transparent?: boolean;\n  edgeFade?: number;\n  noiseAmount?: number;\n};\n\nconst createTouchTexture = (): TouchTexture => {\n  const size = 64;\n  const canvas = document.createElement('canvas');\n  canvas.width = size;\n  canvas.height = size;\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('2D context not available');\n  ctx.fillStyle = 'black';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  const texture = new THREE.Texture(canvas);\n  texture.minFilter = THREE.LinearFilter;\n  texture.magFilter = THREE.LinearFilter;\n  texture.generateMipmaps = false;\n  const trail: TouchPoint[] = [];\n  let last: { x: number; y: number } | null = null;\n  const maxAge = 64;\n  let radius = 0.1 * size;\n  const speed = 1 / maxAge;\n  const clear = () => {\n    ctx.fillStyle = 'black';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n  const drawPoint = (p: TouchPoint) => {\n    const pos = { x: p.x * size, y: (1 - p.y) * size };\n    let intensity = 1;","sourceCodeStart":44,"sourceCodeEnd":80,"githubUrl":"https://github.com/DavidHDev/react-bits/blob/c7109dccb42e06592d1d9bc50bc87204697240e2/src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx#L44-L80","documentation":"createTouchTexture builds an offscreen canvas and requests a '2d' context for it. getContext('2d') returns null only when the context cannot be created — usually because the page has hit the browser's cap on live canvas/contexts, or the environment has no 2D canvas backend. The throw aborts touch-trail texture setup for PixelBlast.","triggerScenarios":"document.createElement('canvas').getContext('2d') returns null at src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx:62 inside createTouchTexture.","commonSituations":"Pages with many simultaneous canvases/WebGL contexts exceeding the browser limit (Chrome ~16); non-browser/SSR rendering where document.createElement exists but 2D canvas is not implemented; memory pressure preventing context allocation; the canvas already had an incompatible context type assigned.","solutions":["Reduce the number of live canvases/WebGL contexts on the page; dispose/reuse the touch canvas.","Guard getContext('2d') and fall back to a procedurally generated or static texture.","Reuse a single shared offscreen 2D canvas instead of allocating one per call.","Ensure the code runs in a real browser environment with canvas 2D support."],"exampleFix":"// before\nconst ctx = canvas.getContext('2d');\nif (!ctx) throw new Error('2D context not available');\n\n// after\nconst ctx = canvas.getContext('2d');\nif (!ctx) {\n  return createProceduralFallbackTexture(); // solid black DataTexture\n}","handlingStrategy":"validation","validationCode":"function canGet2D(): boolean {\n  try { return !!document.createElement('canvas').getContext('2d'); }\n  catch { return false; }\n}","typeGuard":"function get2D(canvas: HTMLCanvasElement): CanvasRenderingContext2D | null {\n  return canvas.getContext('2d');\n}","tryCatchPattern":"let ctx = canvas.getContext('2d');\nif (!ctx) {\n  return createFallbackTexture(); // solid black DataTexture\n}","preventionTips":["Reduce total live canvases/WebGL contexts to stay under the browser cap (~16).","Reuse a single shared offscreen 2D canvas for the touch trail.","Guard getContext('2d') and fall back to a procedural texture.","Only run PixelBlast in a real browser with canvas 2D support."],"tags":["canvas2d","context","resource-limits","texture","pixelblast"],"backgroundTag":null,"analyzedSha":"c7109dccb42e06592d1d9bc50bc87204697240e2","analyzedAt":"2026-08-13T02:32:07.327Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}