How to Detect WebGL Support in the Browser

Detecting WebGL Support

WebGL (Web Graphics Library) enables hardware-accelerated 3D graphics in the browser without plugins. Detection involves creating an HTML canvas element and attempting to get a WebGL rendering context.

Basic Detection

function hasWebGL() {
  try {
    const canvas = document.createElement('canvas');
    return !!(
      canvas.getContext('webgl') ||
      canvas.getContext('experimental-webgl')
    );
  } catch (e) {
    return false;
  }
}

WebGL2 Detection

WebGL2 provides access to the OpenGL ES 3.0 feature set. It adds features like 3D textures, transform feedback, and uniform buffer objects:

function hasWebGL2() {
  try {
    const canvas = document.createElement('canvas');
    return !!canvas.getContext('webgl2');
  } catch (e) {
    return false;
  }
}

Important Considerations

• Software rendering: Some browsers report WebGL as available even when using software rendering, which is significantly slower. Check WEBGL_debug_renderer_info to detect the GPU.
• Context loss: WebGL contexts can be lost when the GPU is overloaded or the tab is backgrounded. Always handle the webglcontextlost event.
• Mobile limitations: Mobile devices may support WebGL but with restricted texture sizes and shader complexity.
• Browser flags: Users or enterprise policies can disable WebGL entirely, even on capable hardware.