getExtension of undefined when instantiating WebglFilterBackend

[yannickguillemot]

I am working on a large scale application where we manually initialize the filter backend as the fabric canvas object is also initialized.

My module interacting with FabricJS is tested with jest and jsdom. In this scenario only, I get an error in fabric's code (this.captureGPUInfo):

TypeError: Cannot read property 'getExtension' of undefined
      17198 |       }
      17199 |       var gl = this.gl;
    > 17200 |       var ext = gl.getExtension('WEBGL_debug_renderer_info');
            |                    ^

More specifically here's where the code block we are interested in:

  /**
   * WebGL filter backend.
   */
  function WebglFilterBackend(options) {
    if (options && options.tileSize) {
      this.tileSize = options.tileSize;
    }
    this.setupGLContext(this.tileSize, this.tileSize);
    this.captureGPUInfo();
  };

this.setupGLContext ( and more specifically this.createWebGLCanvas) assigns a value to this.gl if the canvas element has a webgl or a experimental-webgl context. Without checking if it's truthy, this.captureGPUInfo then tries to access it. It seems like a jsdom canvas has none of these contexts available and makes the tests break.

Here's how I initiate FabricJS: https://jsfiddle.net/YannGuillemot/tq9mz284/

I have been able to get around that by checking if we were running the code in a testing environment. Any suggestions on how to better handle this or would we have to check for node every time?

[asturur]

i guess fabric could early exit if this.gl is falsy?

[yannickguillemot]

I looked into the captureGPUInfo method and checking for gl before calling gl.getParameter would fix my use case at least.

var renderer = gl && gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
var vendor = gl && gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);

or even

if (ext && gl) {
        var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
        var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
        ...

I am not sure if it impacts other parts of the codebase.

[yannickguillemot]

Actually, just var ext = gl && gl.getExtension('WEBGL_debug_renderer_info'); should do the trick.

[asturur]

i should early exit from all the function that use a glContext since that is not supported in node.
Please feel free to open a pr to do that if you have time.
i prefere a more visible

if (!gl) {
  return;
}

as early as possible

[yannickguillemot]

I am sorry, I just tuned back into this issue. Glad to see you got a PR merged! Thank you!