Canvas resize

[antonkarytski]

Hello, if i try to resize canvas after onLayout triggered, it stretched drawing out. (looks like, context was scaled). Here is simple reproduce step

const {width, height} = useWindowDimensions()

const style = { width, height }

<GCanvasView onCanvasCreate={setRef} style={style} />

Is it a way to workaround it, or may be i do smth wrong? Also tried to write dimensions directly in canvas like this.canvas.width = width, no luck

[antonkarytski]

also, when canvas size bigger than device screen size, it may cause crashes. Pretty strange crashes, looks like it also kill some other process, and takes some time to restore device. Catch it on Android, no reports from iOs

[flyskywhy]

First of all, I'm glade to see your APP using @flyskywhy/react-native-gcanvas 😆

1. context was scaled I also reproduced the scale issue on expo-gl and web <canvas/>, and found the only solution on <canvas/> is this.canvas.width = width; this.canvas.height = height; (and it will clear everything) then redraw everything, I'm working on adding the same solution to @flyskywhy/react-native-gcanvas.

2. canvas size bigger cause crashes I can't reproduced it, can you describe it more detail?

[antonkarytski]

Hey, sorry for delay, it will be greate if resize will available. About crashes with big canvas. It generally happens in dev mode after app reload (e.g with R button), i was able to easely catch it when size of canvas was x4 of screen size. And there is no info about crash in adb. (or i didnt catch it clearly) After some investigation i find out that there is restriction for large canvas in web, and it takes a lot memory. So i think the same with mobile canvas. And maybe crashes happens because of overused RAM at least it looks like that.

[flyskywhy]

v2.3.10 fixed this issue.

The new added property onCanvasResize usage can ref to README.md diff of https://github.com/flyskywhy/react-native-gcanvas/commit/8225a742df5945a803b31deb54d3ff8727dd7d9d

[flyskywhy]

Hey, sorry for delay, it will be greate if resize will available. About crashes with big canvas. It generally happens in dev mode after app reload (e.g with R button), i was able to easely catch it when size of canvas was x4 of screen size. And there is no info about crash in adb. (or i didnt catch it clearly) After some investigation i find out that there is restriction for large canvas in web, and it takes a lot memory. So i think the same with mobile canvas. And maybe crashes happens because of overused RAM at least it looks like that.

The size of canvas limited by GL_MAX_RENDERBUFFER_SIZE_EXT of the GPU in your device, ref to https://community.khronos.org/t/gl-max-renderbuffer-size/58170

PS: why x4 of screen size? Because your PixelRatio.get() is 4? If so, @flyskywhy/react-native-gcanvas automatically set ctx.scale to PixelRatio.get(), but keep canvas.width value be same to canvas.clientWidth (as what original alibaba/GCanvas did), I will refactor canvas.width value to canvas.clientWidth * PixelRatio.get() in the future.