I am building a Digital Audio Workstation with nextjs and konva. I have just hit 6 layers and received the warning:

Konva warning: The stage has 6 layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.

I am confused how grouping would solve my issue. For instance I have a layer for a scrollbar When the user moves the scrollbar I need to update the scrollbar thumbs position very often (on mousemove event). Similarly for a select tool the blue select rectangle needs to be redrawn very often. I dont want to have to redraw much else in these layers as they need to be redrawn so often. Other layers have hundreds of shapes and I dont want to redraw those often either.

If I group these into the same layer but in different groups I am under the understanding that the entire canvas element (layer) will still have to be redrawn. So my question is how does the recommended approach of groups solve the layer issue?

I am building a Digital Audio Workstation with nextjs and konva. I have just hit 6 layers and received the warning:

Konva warning: The stage has 6 layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.

I am confused how grouping would solve my issue. For instance I have a layer for a scrollbar When the user moves the scrollbar I need to update the scrollbar thumbs position very often (on mousemove event). Similarly for a select tool the blue select rectangle needs to be redrawn very often. I dont want to have to redraw much else in these layers as they need to be redrawn so often. Other layers have hundreds of shapes and I dont want to redraw those often either.

If I group these into the same layer but in different groups I am under the understanding that the entire canvas element (layer) will still have to be redrawn. So my question is how does the recommended approach of groups solve the layer issue?

• javascript
• konvajs

1 Answer 1

First off your instincts are correct re avoiding redraws of content that is not changing. The warning is about making you aware of a bad pattern that developers sometimes use which is to place a handful of shapes on a large number of layers. Since each Konva.Layer is an HTML5 canvas at the DOM level, and managing canvases in memory etc, has an overhead, keeping the number of layers to a minimum is good practice. Whether an app experiences an overhead from too many layers is case dependent and I won't go into more detail without a live case.

One legitimate technique is to switch shapes between layers when they need repetitive redraws, and replace them back into the original layer when that phase is complete. That technique might help with you scrollbars concern.

There is a list of performance considerations and tips on the Konva docs website that I will not copy here as not appropriate. It covers things like caching. See https://konvajs./docs/performance/All_Performance_Tips.html.