<h2>Drawing Sprites Using 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 theSprite = new Image();

theSprite.src =
  "https://opengameart.org/sites/default/files/hero_spritesheet_0.png";

var animations = {
  standing: [0, 0, 80, 94],
  walking: [0, 94, 80, 94,
           80, 94, 80, 94,
           160, 94,  80, 94,
           240, 94, 80, 94,
           320, 94, 80, 94,
           400, 94, 80, 94],
  jumping: [0, 282, 80, 94,
           80, 282, 80, 94,
           160, 282, 80, 94]
};

theSprite.onload = function() {
  var heroA = new Konva.Sprite({
    x: 50,
    y: 50,
    image: theSprite,
    animation: 'standing',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroB = new Konva.Sprite({
    x: 50,
    y: 150,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroC = new Konva.Sprite({
    x: 50,
    y: 250,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 60,
    frameIndex: 0
  });
  
  var heroD = new Konva.Sprite({
    x: 275,
    y: 150,
    scale: 2,
    image: theSprite,
    animation: 'jumping',
    animations: animations,
    frameRate: 2,
    frameIndex: 0
  });

  layerA.add(heroA, heroB, heroC, heroD);
  stage.add(layerA);
  
  heroA.start();
  heroB.start();
  heroC.start();
  heroD.start();
};