<h2>Drawing Stars in Konva</h2>
<div id="stars"></div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

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

var layerA = new Konva.Layer();

var starA = new Konva.Star({
  x: 70,
  y: 80,
  numPoints: 4,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var starB = new Konva.Star({
  x: 200,
  y: 100,
  numPoints: 8,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 1)",
});

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

var starD = new Konva.Star({
  x: 325,
  y: 75,
  numPoints: 5,
  innerRadius: 20,
  outerRadius: 40,
  stroke: "black",
  fill: "lightgreen",
});

var starE = new Konva.Star({
  x: 100,
  y: 250,
  numPoints: 25,
  innerRadius: 25,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starF = new Konva.Star({
  x: 300,
  y: 275,
  numPoints: 40,
  innerRadius: 5,
  outerRadius: 80,
  stroke: "black",
  fill: "black",
});

layerA.add(starA, starB, starC, starD, starE, starF);

stage.add(layerA);

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