Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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
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.
Shapes outside canvas drawing area still take time to render. This is a native canvas limitation. You can improve performance by setting objects' visibility to
false at times like this.