<h2>Layering in Konva</h2>
<div id="example"></div>
<div id="buttons">
  <button class="indi-top">Indigo Top</button>
  <button class="indi-bottom">Indigo Bottom</button>
  <button class="indi-up">Indigo Up</button>
  <button class="indi-down">Indigo Down</button>
  <button class="indi-alltop">Indigo Above all Others</button>
</div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

#example {
  width: 600px;
  height: 400px;
  box-shadow: 0 0 1px #ddd, 0 2px 2px #aaa;
  border-radius: 5px;
  margin: 20px 0;
}

button {
  border: 1px solid black;
  padding: 6px;
  cursor: pointer;
  background: white;
  outline: none;
}

button:hover {
  background: black;
  color: white;
}
var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();
var layerB = new Konva.Layer();

var colors = ['violet', 'indigo', 'blue', 'lightgreen', 'yellow', 'orange', 'red'];

var circles = [];

for(var i=0; i < 7; i++) {
  var circle = new Konva.Circle({
    x: 100 + 80*i,
    y: 200,
    radius: 80,
    fill: colors[i],
    draggable: true
  });
  
  circle.on('mouseenter', function() {
     document.body.style.cursor = 'move';
  });
  circle.on('mouseleave', function() {
     document.body.style.cursor = 'default';
  });
  circles.push(circle);
}

layerA.add(circles[0], circles[1], circles[2]);
layerB.add(circles[3], circles[4], circles[5]);

stage.add(layerA, layerB);

document.querySelector('.indi-top').addEventListener('click', function() {
  circles[1].moveToTop();
  layerA.draw();
  layerB.draw();
}, false);

document.querySelector('.indi-bottom').addEventListener('click', function() {
  circles[1].moveToBottom();
  layerA.draw();
  layerB.draw();
}, false);

document.querySelector('.indi-up').addEventListener('click', function() {
  circles[1].moveUp();
  layerA.draw();
  layerB.draw();
}, false);

document.querySelector('.indi-down').addEventListener('click', function() {
  circles[1].moveDown();
  layerA.draw();
  layerB.draw();
}, false);

document.querySelector('.indi-alltop').addEventListener('click', function() {
  circles[1].moveToTop();
  layerA.moveToTop();
  layerA.draw();
  layerB.draw();
}, false);


External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js