When you are working with
Konva directly you have many methods to change the order of nodes like
node.moveToTop(), etc. Tutorial.
But it is not recommended to use these methods when you are working with the React framework.
react-konva is trying to follow the order of the nodes exactly as you described them in
render(). So instead of changing the zIndex manually, you just need to update the state of the app correctly, so the
render() returns the correct order.
Don’t use the
zIndex for your canvas components.
If you want to temporarily move a node into another container, for example when you want to show an overlay, take a look into the Canvas Portal demo.
Instructions: Try to drag a circle. See how it goes to the top. We are doing this by manipulating the state so that the
render() method returns the correct order.