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:

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