-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Optimizing performance
If you don't need Fabric interactivity (selecting/moving/scaling/rotating objects), the simplest thing you can do to improve performance is to use fabric.StaticCanvas instead of fabric.Canvas.
If you don't need object to be selectable, setting "selectable" to false will improve performance since no controls or borders need to be rendered, and corner detection on mouseover doesn't need to occur.
If you do need objects to be selectable, but don't need controls and/or borders, setting these properties to false will improve performance as well.
If you don't need to be able to rotate an object, setting this property to false will skip rendering of corresponding control and improve performance
Another option — if you don't need selection — is to disable it per entire canvas. This will improve performance.
You can toggle skipTargetFind to avoid Fabric detecting object corners on mouse movement over canvas, if you don't need that functionality at all or at certain times.
When adding or removing large number of objects, you can use renderOnAddRemove to control whether entire canvas should be re-rendered after object is added or removed. This could improve performance.
Shapes outside canvas drawing area still take time to render. This is a native canvas limitation (as of 2013-09-19 this was marked as fixed, needs to be tested with fabricjs to confirm if this is still an issue) . You can improve performance by setting objects' visibility to false at times like this.