Add CanvasRenderingContext2D support

[ShaoGongBra]

Description

At the JS level, existing APIs can basically simulate most of the functions of CanvasRendering Context2D, but the performance is relatively low, about less than half of Canvas 2D (frame rate in the same scene). Can CanvasRendering Context2D function be natively supported? This new feature should be able to reduce one step

[ShaoGongBra]

I have released the RN plugin for this library, and you can base your tests on it

https://github.com/duxapp/react-native-canvas

[wcandillon]

That looks really interesting. Why not use typescript there? Also have you look at how canvaskit had an experimental support for canvas2d API using CanvasKit (so not exactly Skia API but very close): https://github.com/google/skia/tree/main/modules/canvaskit/htmlcanvas

Regarding performance, could explain a bit more the issues? do you use immediate mode as described in https://shopify.github.io/react-native-skia/docs/canvas/rendering-modes

I would like to understand your current struggles better

[ShaoGongBra]

Both modes are available in this plugin. By passing in a picture and using immediate mode, the performance in immediate mode is much higher than that in retained mode. However, I compared the new energy in immediate mode. Why not use typescript? It's purely personal preference and comes with a d.ts description file provided for ts to use

https://github.com/duxapp/react-native-canvas/blob/main/src/Canvas/index.js

[wcandillon]

If you have an example that you find to not have good performance, could you send it to me? I'd like to have a look

[ShaoGongBra]

https://github.com/ShaoGongBra/rn-test/blob/master/app/(tabs)/index.tsx

I have added an example here. When opened in a browser on the same device, its frame rate is stable at 60 (due to browser limitations, it cannot only run up to 60). However, on the released version of RN, the frame rate is less than 40 and very unstable

[wcandillon]

But this might be related to your integration, I can only investigate if there is a performance issue with React Native Skia, does it make sense?

[ShaoGongBra]

但这可能和你的集成有关，我只能调查React Native Skia是否存在性能问题，这样说合理吗？

I will write an example using Skia and Canvas directly in the future

[wcandillon]

Thank You very much. I'm very curious about performance.

…

On Tue, Mar 17, 2026 at 2:36 PM shaogong ***@***.***> wrote: 但这可能和你的集成有关，我只能调查React Native Skia是否存在性能问题，这样说合理吗？ I will write an example using Skia and Canvas directly in the future — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[ShaoGongBra]

Thank You very much. I'm very curious about performance.
…

I have updated that repository. This is a very simple example, but there are many quantities. It only draws circular and rectangular lines with animation effects. When I set 4000 elements to be drawn on the same device, Canvas can maintain a stable frame rate of 60 frames per second, which is a browser limitation, not only 60 frames per second. For the Android release, it is around 27 frames per second. This example should show whether the problem is with the code I wrote or other issues

[ShaoGongBra]

From the example I provided, can you tell which part of the process is the issue

[wcandillon]

Unfortunately not, I am struggling to understand the context. I would need a small reproducible example to be able to test and provide insight. My apologies, sometimes it can take me a lot of time to get into complex third-party codebases.

…

On Tue, Mar 24, 2026 at 4:29 PM shaogong ***@***.***> wrote: From the example I provided, can you tell which part of the process is the issue — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[ShaoGongBra]

In the current example, no third-party libraries were used, only Skia's API was used to draw rectangles, circles, lines, and animations. Did you not find the code? Please note that you need to switch to the master branch

[wcandillon]

I will run https://github.com/ShaoGongBra/rn-test/blob/master/app/(tabs)/lib/simpleBenchmark.ts and report back to you

…

On Tue, Mar 24, 2026 at 4:45 PM shaogong ***@***.***> wrote: In the current example, no third-party libraries were used, only Skia's API was used to draw rectangles, circles, lines, and animations. Did you not find the code? Please note that you need to switch to the master branch — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.