<h2>Drawing Rings in Konva</h2>
<div id="rings"></div>

body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

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

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var ringA = new Konva.Ring({
  x: 125,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var ringB = new Konva.Ring({
  x: 200,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 0.5)",
});

var ringC = new Konva.Ring({
  x: 475,
  y: 175,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var ringD = new Konva.Ring({
  x: 325,
  y: 100,
  innerRadius: 20,
  outerRadius: 40,
  scaleY: 2,
  scaleX: 0.3,
  rotation: 45,
  stroke: "black",
  fill: "lightgreen",
});

var starA = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 20,
  innerRadius: 50,
  outerRadius: 115,
  stroke: "black",
  fill: "black",
});

var ringE = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 90,
  stroke: "black",
  fill: "red",
});

var starB = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starC = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 25,
  outerRadius: 50,
  stroke: "black",
  fill: "orange",
});

var ringF = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 20,
  stroke: "black",
  fill: "white",
});

layerA.add(ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF);

stage.add(layerA);