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