Zooming the canvas becomes laggy when there are too many graphics.

[zhe-he]

When the canvas contains 3,000 rectangles, zooming becomes laggy, even though I have added caching.
Is there a good solution for this? I found that panning the canvas is relatively less laggy compared to zooming.

demo

[asturur]

https://fabricjs.com/docs/fabric-object-caching/

Please check this doc full when looking at many objects.
Ideally remove caching for those situations.

With caching removed and 5000 objects i can do 120 fps during zooming on a macbook pro m1 from 2020 ( good machine , not crazy )

[zhe-he]

I used 3000 rectangles to simulate the problem I encountered. The main issue is that when there are too many graphics (groups, ordinary graphics, clipped graphics, and groups containing clipped graphics), the canvas lags during zooming.
Looking at other products' solutions, during canvas zooming, the canvas becomes blurry, and it becomes clear again after the zooming ends. This behavior is similar to the noScaleCache in Fabric.js, but noScaleCache only works for scaling individual objects, not for scaling the entire canvas.
So, how can multi-object rendering be optimized during canvas zooming? (In my actual tests, both enabling and disabling object caching using objectCaching result in lag.)

[zhe-he]

renderCanvas() {
    ...
    this.fire('before:render', { ctx });
    ...
    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
    this._renderObjects(ctx, objects);
    ...
    this.fire('after:render', { ctx });
    ...
}
_renderObjects(ctx: CanvasRenderingContext2D, objects: FabricObject[]) {
    for (let i = 0, len = objects.length; i < len; ++i) {
      objects[i] && objects[i].render(ctx);
    }
  }

I found that the main issue is caused by this function(_renderObjects), as it must render all the graphics.
In the future, could it be modified as follows: prioritize rendering the graphics at the center of the screen within one frame, and render the other graphics in the next frame? If it's not possible to render all the remaining graphics in the next frame, then render the rest in subsequent frames.

[zhe-he]

At this point, it might require 𝑁 × 𝑁 (depending on the number of graphics that can be drawn in a single frame) cached graphics, for example, 3×3.
First, render the graphics in area 5 and cache area 5 as image A.
In the next frame, render the graphics in area 4, and use image A directly for area 5.
In the following frame, render the graphics in area 6, use image B for area 4, and use image A for area 5.

[asturur]

With many objects finding which objects to render with some complex logic is as expensive as render.
Zooming costs.
For applications that have to render so many objects of complex nature, the best thing to do is to override the canvas method for render and tweak the logic for what works best.
FabricJS can't implement all the possible shortcuts of different applications tasks and also the detection of what to run at what moment.

There is no canvas zoom action in fabricJS, so fabricJS can't even detect it.
Is the developer that decides to execute a canvas pan and zoom that needs to write the code that works best for his own case, for example render only the top 100 objects in the are or something like that.