How to render thousands of path without any lag in canvas (Android).

[amitsri007]

I'm working on a personal project to make a writing application using react-native-skia. I have checked multiple examples and came up with the following code. This code works fine up to a specific time and then starts lagging. Please check the attached video and code.

Please also suggest whether react-native-skia is the right choice for this kind of application or not. Do we have any other library which I can use in place of RN Skia? I would appreciate any help you can give me

react-native-skia-writing-demo.mp4

The code is attached.

painter.txt

[wcandillon]

One suggestion would be to use Path ops:
path.current = Skia.Path.MakeFromOp(
path.current,
newPath,
PathOp.Union
)!;
So you only draw one path. And SkiaView relies on the JS thread and is slower than Canvas. We recommend that you only use Canvas. We will document this.

[amitsri007]

@wcandillon Thanks for the suggestions. As you said that SkiaView will be slower than Canvas. Can you please suggest if there is a way to achieve high rendering performance using canvas?

[wcandillon]

Maybe you can look at this example: https://github.com/Shopify/react-native-skia/pull/1498/files#diff-12e18bf5b4eb499aa9bd9adf291ef138dc2f5f94af2046bd31468c638509294b
Here when you draw, we save the image, so you only draw the increments.

[amitsri007]

@wcandillon Thanks for the reference, I'll check and let you know if that works.