Konva Template

by SĂ©bastien Lorentz

HTML

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

<img id="blue" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLz48L3N2Zz4=">

<img id="red" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0icmVkIiAvPjwvc3ZnPg==">

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 svgImage = new Konva.Image({
   x : 0, y : 0, width: 100, height: 100,
   draggable: true,
   image: new Image()
});

const clone = svgImage.clone({x: 100});

let isRed = false;

setInterval(() => {
	svgImage.image().src = (isRed ? document.getElementById("red") : document.getElementById("blue")).src;
  svgImage.getLayer().draw();
  isRed = !isRed;
	svgImage.cache();
}, 500)

layer.add(svgImage).draw();
layer.add(clone).draw();