HTML5 Canvas All Konva performance tips list
Don’t want to spend your time with performance issues? Request a performance review.
There is a full list of useful performance tips:
- Shape Caching
- Layer Management
batchDraw
method- Optimize Animation
- Shape Redraw
- If your shape has only position transformation (
x
andy
, noscale
,rotation
) settransformsEnabled = 'position'
- If you don’t need event on layer set
layer.hitGraphEnabled(false)
. Or use Konva.FastLayer. See Demo - For mobile application set viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- If you have bad performance on retina devices set
Konva.pixelRatio = 1
. Make sure that quality of result is ok for you. - While dragging a node you can move it on separate layer. Then move it back to original layer. See Demo
- Optimize Stroke Drawing
- If a shape has fill, stroke and opacity you may set
shape.perfectDrawEnabled(false)
. See demo for more information Disable Perfect Drawing. - Try to set
shape.listening(false)
where possible. For more info read Listening false. - Avoid Memory Leaks.
- Don’t create large stages. Try to make canvases as small, as possible. 8000px wide canvas is blah 🤢. use this tip instead
- Do not create too many layers. Usually 3-5 is max.
- Hide (or remove from layer) invisible objects (or objects that go out of the screen).