fabricjs/fabric.js · error · FabricError

Vertex, fragment shader or program creation error

Error message

Vertex, fragment shader or program creation error

What it means

When a WebGL filter is applied, Fabric compiles its GLSL shaders via gl.createShader/gl.createProgram. If any of these WebGL calls returns null/falsy (the context failed to allocate shader or program objects), this generic creation error is thrown before compilation is even attempted. It almost always indicates a broken or resource-exhausted WebGL context rather than a shader bug.

Source

Thrown at packages/core/src/filters/BaseFilter.ts:100

    gl: WebGLRenderingContext,
    fragmentSource: string = this.getFragmentSource(),
    vertexSource: string = this.getVertexSource(),
  ) {
    const {
      WebGLProbe: { GLPrecision = 'highp' },
    } = getEnv();
    if (GLPrecision !== 'highp') {
      fragmentSource = fragmentSource.replace(
        regex,
        highPsourceCode.replace('highp', GLPrecision),
      );
    }
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    const program = gl.createProgram();

    if (!vertexShader || !fragmentShader || !program) {
      throw new FabricError(
        'Vertex, fragment shader or program creation error',
      );
    }
    gl.shaderSource(vertexShader, vertexSource);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
      throw new FabricError(
        `Vertex shader compile error for ${this.type}: ${gl.getShaderInfoLog(
          vertexShader,
        )}`,
      );
    }

    gl.shaderSource(fragmentShader, fragmentSource);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
      throw new FabricError(
        `Fragment shader compile error for ${this.type}: ${gl.getShaderInfoLog(

View on GitHub (pinned to 2bd4992cab)

Solutions

1. Reuse a single canvas/context and dispose filters/images properly so contexts aren't leaked (browsers limit live WebGL contexts).
2. Handle context loss: listen for `webglcontextlost` and re-create the canvas/filters, or reload after restoring the context.
3. Verify the environment supports WebGL (headless CI may need --use-gl=swiftshader or a GPU); fall back to no filter or 2D-only processing.
4. If reproducible with one filter, test in a clean page to rule out resource exhaustion from other code.

Example fix

// before
img.filters = [new fabric.Image.filters.Blur({ blur: 0.5 })];
img.applyFilters(); // may throw if WebGL resources are exhausted

// after
// limit live contexts, dispose unused canvases
oldCanvas.dispose();
img.filters = [new fabric.Image.filters.Blur({ blur: 0.5 })];
img.applyFilters();

function webglAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    return !!(c.getContext('webgl') || c.getContext('experimental-webgl'));
  } catch { return false; }
}
if (!webglAvailable()) img.filters = []; // skip filters

const canUseFilters = (canvas: HTMLCanvasElement): boolean =>
  !!canvas.getContext('webgl2') || !!canvas.getContext('webgl');

try {
  img.applyFilters();
} catch (e) {
  if (e instanceof Error && /shader or program creation error/.test(e.message)) {
    img.filters = []; // degrade gracefully without filters
    img.applyFilters();
  } else throw e;
}

When it happens

Trigger: Applying any filter (e.g. fabric.Image.filters.Blur) when the WebGL context is lost, was force-destroyed, has run out of GPU resources, or when a non-WebGL/noop context is used. Repeatedly creating filters/contexts without cleanup can exhaust resources and make createShader/createProgram return null.

Common situations: WebGL context loss on mobile browsers or after GPU driver resets; too many canvases/contexts open (browsers cap active contexts); running in headless/CI environments without proper GPU support; memory pressure from many large filtered images.

Related errors

• Vertex shader compile error for ${this.type}: ${gl.getShader
• Fragment shader compile error for ${this.type}: ${gl.getShad
• No class registered for ${classType}
• Trying to initialize a canvas that has already been initiali
• Fabric env was not initialized. Import fabric, fabric/node,

AI-assisted analysis of fabricjs/fabric.js@2bd4992cab (2026-08-28). Data as JSON: /api/errors/9c2d40995a62309b. Report an issue: GitHub.