<h2>Drawing Images in Konva</h2>
<div id="example"></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;
}

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();
var theImage = new Image();

theImage.src = "https://cdn.pixabay.com/photo/2017/09/16/16/08/sea-2755907__340.jpg";
theImage.onload = function() {
  var field = new Konva.Image({
    x: 35,
    y: 115,
    image: theImage,
    width: 500,
    height: 250,
    rotation: -10,
    stroke: "black",
    strokeWidth: 15
  });

  layerA.add(field);
  stage.add(layerA);
};