Konva Template

by Andrea Ercolino

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<div id="container"></div>

CSS

body {
  margin: 0;
}

Babel + JSX

const stage = new Konva.Stage({
   container: 'container',
   width: window.innerWidth,
   height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const poly1 = new Konva.Line({
  points: [20, 20, 20, 160, 70, 93, 150, 109, 290, 139, 270, 93],
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 5,
  closed: true
});
const poly2 = new Konva.Line({
  points: [220, 220, 220, 360, 270, 293, 350, 309, 490, 339, 470, 293],
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 5,
  closed: true
});

layer.add(poly1);
layer.add(poly2);

const rectData = poly1.getClientRect();
const rect = new Konva.Rect(Object.assign({}, rectData, {
  stroke: 'red',
  strokeWidth: 2,	
}));
layer.add(rect);

layer.draw();