Skip to content

Optimizing performance

Chris Magnuson edited this page Apr 18, 2019 · 6 revisions

Canvas vs. StaticCanvas

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.

object.selectable=false

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.

object.hasControls = false, object.hasBorders = false

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.

object.hasRotatingPoint = false

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

canvas.selection = false

Another option — if you don't need selection — is to disable it per entire canvas. This will improve performance.

fabric.Canvas#skipTargetFind for better mouse movement

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.

canvas.renderOnAddRemove=false when adding many objects

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.

object.visible=false

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.