HTML5 Canvas All Konva performance tips list

  1. batchDraw method
  2. Layer Management
  3. Shape Caching
  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.
  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.