-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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.