Shopify / react-native-skia

High-performance React Native Graphics using Skia

Home Page:https://shopify.github.io/react-native-skia

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support Dynamically Created and Destroyed <Canvas>

jack-beanstalk-2022 opened this issue · comments

Description

I am using react + react-native-skia to develop a web application (however I believe this problem is present in mobile as well), I found that when "Canvas" is inside a react component that gets dynamically created and destroyed (e.g. a right click menu), the browser soon starts to report "too many WebGL context" after a few create-destroy cycle.

If I am using it wrong, please let me know. But I think this limits the usage of the framework by a great extent. Controlling a React component to show and disappear based on a state is a very common pattern. Lacking this support, people have to choose between rendering using React (the html stuff) and Skia (a static Canvas).

It's interesting because we use the WEBGL_lose_context extension that should get rid of this warning:
https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
Could you be using an older version of the code? Or maybe aren't we using this extension correctly?

We are actively looking at WebGPU because it has the benefit of sharing resources accross different canvas and this is of high interest for us in a couple of APIs we are building.