Performance Issues with EraserBrush on iOS Devices

[ldhoax]

I'm using Fabric with a Eraser custom build (http://fabricjs.com/build). Everything works well on Android, Windows, and Macbook, but on iPhone and iPad, the fabric.EraserBrush is quite slow and can crash or render an empty white page if too much is erased.

I think it might relate to Retina resolution, so I tried settingenableRetinaScaling: false, which improved the performance a bit, but it’s still slow.

Do you think there are any ways to improve this? Could you share any functions or lines of code that might be causing the slowdown? I'm usingfabric.PencilBrush and fabric.EraserBrush.

Thanks a lot for your help! 🙏

[mhieupham1]

I’ve looked into why it's slow and causing the white screen issue. First, both iPads and iPhones have a size limit for canvas. If you exceed that limit, your canvas will crash. As for why so many canvases are being created, it could be related to the eraser function. When you erase multiple objects, a corresponding number of canvases is generated, one for each object, to cover the erased parts. The more you erase, the more canvases are created, and when the device hits its limit, it crashes. I’ve tried optimizing this before, but haven’t found a solution yet. Just sharing some information with you @ldhoax

[mhieupham1]

i think that when erasing an object on the canvas,, if the object has been erased, it should be removed from the canvas, additionally, the cache related to that erased part should also be clear, if we delete an object that has erased, we should also clean the cache for that erased part. i hope this help

[ldhoax]

Thanks for your explanation, @mhieupham1. Due to time constraints, I switched to a simpler library. I will research and dig deeper into this later 🙏

[asturur]

The Erase brush is not supported anymore. You can look into the erase2d library from Shaman123 https://github.com/ShaMan123/erase2d