DavidHDev/react-bits · error · Error

2D context not available

Error message

2D context not available

What it means

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.

Source

Thrown at src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx:62

  enableRipples?: boolean;
  rippleIntensityScale?: number;
  rippleThickness?: number;
  rippleSpeed?: number;
  liquidWobbleSpeed?: number;
  autoPauseOffscreen?: boolean;
  speed?: number;
  transparent?: boolean;
  edgeFade?: number;
  noiseAmount?: number;
};

const createTouchTexture = (): TouchTexture => {
  const size = 64;
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('2D context not available');
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  const texture = new THREE.Texture(canvas);
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.generateMipmaps = false;
  const trail: TouchPoint[] = [];
  let last: { x: number; y: number } | null = null;
  const maxAge = 64;
  let radius = 0.1 * size;
  const speed = 1 / maxAge;
  const clear = () => {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  };
  const drawPoint = (p: TouchPoint) => {
    const pos = { x: p.x * size, y: (1 - p.y) * size };
    let intensity = 1;

View on GitHub (pinned to c7109dccb4)

Solutions

1. Reduce the number of live canvases/WebGL contexts on the page; dispose/reuse the touch canvas.
2. Guard getContext('2d') and fall back to a procedurally generated or static texture.
3. Reuse a single shared offscreen 2D canvas instead of allocating one per call.
4. Ensure the code runs in a real browser environment with canvas 2D support.

Example fix

// before
const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('2D context not available');

// after
const ctx = canvas.getContext('2d');
if (!ctx) {
  return createProceduralFallbackTexture(); // solid black DataTexture
}

function canGet2D(): boolean {
  try { return !!document.createElement('canvas').getContext('2d'); }
  catch { return false; }
}

function get2D(canvas: HTMLCanvasElement): CanvasRenderingContext2D | null {
  return canvas.getContext('2d');
}

let ctx = canvas.getContext('2d');
if (!ctx) {
  return createFallbackTexture(); // solid black DataTexture
}

When it happens

Trigger: document.createElement('canvas').getContext('2d') returns null at src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx:62 inside createTouchTexture.

Common situations: 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.

Related errors

• Could not get 2d context
• Failed to create WebGL texture.
• Failed to create WebGL texture.
• No WebGL 2 context!
• No WebGL 2 context!

AI-assisted analysis of DavidHDev/react-bits@c7109dccb4 (2026-08-13). Data as JSON: /api/errors/67dde801e5a9a70e. Report an issue: GitHub.