failed to create webgl context

[tlow92]

Issue

When using chromium based browsers and hardware acceleration is disabled react-native-skia on web is not initializing properly.

Error:

canvaskit.js:18 Uncaught failed to create webgl context: err 0

I think it's coming from here https://github.com/google/skia/blob/ab25edec05410e8ee23c6e4cbe311a70dbf04217/modules/canvaskit/webgl.js#L180

On firefox it works fine even with hardware acceleration disabled.

I know that it comes from canvaskit-wasm but bug reporting for canvaskit seems to not exist anymore and I'm wondering if this is a case that we should handle ourselves? Is there some check that we can do to at least notify users that hardware acceleration is required?

Additional info

Not a solution but to demonstrate, this will return > 0 if context is there and 0 if it is not. So by checking that it can be ensured that skia will not create an error.

 const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas === null) return;
    const ctx = CanvasKit.GetWebGLContext(canvas);
    console.log(ctx);
  }, []);

  return <canvas ref={canvasRef} />

[wcandillon]

Could you update the JS code to create a raster surface if webgl is not available?

[tlow92]

I'm not sure if I understand you right.

There is no other way than what I described above to detect if webgl is available, is it correct?

Yes, my plan is to use the above workaround to show some text to the user that graphics acceleration is required. I was just hoping that there is a more reliable way. Attaching an empty canvas just for this check is a bit hacky.

[wcandillon]

you could do it via the OffscreenSurface API

[tlow92]

@wcandillon Wow, didn't know about this API yet. That is a very nice solution I think, thank you very much.

I am using this now to show some explanation to customers on how to enable graphics acceleration:

const isWebGlAvailable = new OffscreenCanvas(1, 1).getContext('webgl') !== null;

Edit: of course you need to add Platform check or use .native / .web files to only do this on web.

---

Let me know if you want something like this integrated into react-native-skia, in this case I am glad to help with a PR or something. Could also be a prop on Canvas like

checkWebGlCompat: boolean | ReactNode

Where ReactNode would be the fallback component to render instead of the skia canvas.