<h2>Writing Text in Konva</h2>
<div id="text"></div>

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

#text {
  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: "text",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var textA = new Konva.Text({
  y: 25,
  width: canvasWidth,
  align: 'center',
  text: "QUOTE OF THE DAY",
  fontSize: 50,
  fontFamily: "Lato"
});

var textB = new Konva.Text({
  x: canvasWidth/10,
  y: 175,
  width: canvasWidth*8/10,
  align: 'center',
  lineHeight: 1.4,
  text: "You've gotta dance like there's nobody watching,\n Love like you'll never be hurt,\n Sing like there's nobody listening,\n And live like it's heaven on earth.",
  fontSize: 25,
  fontFamily: "Lato"
});

var rectA = new Konva.Rect({
  x: canvasWidth/10 - 10,
  y: 140,
  width: canvasWidth*8/10 + 20,
  height: 240,
  stroke: "black",
  fill: "brown"
});

var rectB = new Konva.Rect({
  x: canvasWidth/10,
  y: 150,
  width: canvasWidth*8/10,
  height: 220,
  stroke: "black",
  fill: "lightblue"
});

var starA = new Konva.Star({
  x: canvasWidth/10,
  y: 150,
  innerRadius: 40,
  outerRadius: 30,
  numPoints: 10,
  stroke: "black",
  fill: "orange"
});

layerA.add(textA, rectA, starA, rectB, textB);

stage.add(layerA);