Description:
When the board exceeds 500+ shapes, panning and zooming might begin to drop frames.
How to Implement:
- Object Caching: Set
fabric.Object.prototype.objectCaching = true. This forces Fabric to render complex shapes to an offscreen canvas first.
- Render Throttling: Ensure you aren't calling
canvas.renderAll() excessively during Yjs updates. Wrap bulk updates in a single requestAnimationFrame.
- Viewport Culling: (Advanced) Override the native rendering loop or selectively hide (
visible: false) objects whose bounding boxes do not intersect with the current canvas.vptCoords bounding box to save GPU resources.
Description:
When the board exceeds 500+ shapes, panning and zooming might begin to drop frames.
How to Implement:
fabric.Object.prototype.objectCaching = true. This forces Fabric to render complex shapes to an offscreen canvas first.canvas.renderAll()excessively during Yjs updates. Wrap bulk updates in a singlerequestAnimationFrame.visible: false) objects whose bounding boxes do not intersect with the currentcanvas.vptCoordsbounding box to save GPU resources.