How to make toBlob(toCanvasElement) faster?

[She-yh]

Hi！👋 I have hit a performance bottleneck. My page involves rendering a StaticCanvas containing some text and exporting an image for Threejs Texture. It works fine on good phones, but the page starts to lag on some less advanced phones, so I'm trying to figure out what's blocking the rendering. I've noticed that calling toCanvasElement in toBlob takes long time on these phones. I simulated it on my computer (limited CPU 20Xslowdown), toCanvasElement took about 400ms, see the image below. Is there any room for optimization?

[asturur]

It depends what are you doing.
If you just want to copy the current canvas in a blob, you can try to avoid the fabricJS render cycle and just copy it.
toBlob will take a fabricJS canvas data and produce a new image, going through the rendering.
If you already have that data displayed in a canvas on the screen at the right resolution you can grab the canvas element and run toBlob from there.

like:

fabricCanvas.lowerCanvasEl.toBlob()

That will take only the raw performance of toBlob with no fabricjs code involved.

I see from your flamegraph you were also using cache there and that is fine, but we know for things like toBlob we have like do cache optimizations yet because the cache is lost by default in that case

[She-yh]

Thank you so much!
I tried to call toBlob directly and set objectCaching false, the export time become shorter from flamegraph!

[She-yh]

By the way, I've noticed some issues mentioning support for offscreencanvas. Here's my scenario: I'm working on a Three.js flipping book. I need to dynamically layout text using Fabric, export it as an image, and then use the image as a Texture. As the user flips the 3D pages, Fabric is also rendering. If Fabric could support offscreencanvas&worker, the flipping process might not cause lag.
Just for a reference, thank you for making such a good canvas library

[asturur]

FabricJS can support offscreen and worker, as long as you don't want to do mouse interaction with it all together. There was a demo about it, the point is it should be trivial to update the fabric data and have the fabric.Canvas being a variable that lives in the worker. Is less easy to work with fabric objects on the main thread and defer the rendering on the worker thread, you have to move all the necessary data from the main thread to the worker one, that kills the performance.