Search code examples
javascriptloopswhile-loopkonvajs

Generate multiple images from loop

I tried to write a loop, that loads the image from local path. For that i try to use Konva:

const playerLayer = new Konva.Layer();
var playerAmount = 1;
  while (playerAmount < 6) {
    var playerIcon = new Image();

    var playerInstance = new Konva.Image({
      x: 660,
      y: 140,
      image: playerIcon,
      width: 32,
      height: 32
    });
    playerIcon.src = "media/heroes/hero1.png";
    playerLayer.add(playerInstance);
    playerAmount++;
    } 
    stage.add(playerLayer);

For some reason images don't appear.

What i checked:

  • Konva.Image's succesfully become children of the PlayerLayer, i can see them in code inspector
  • Layer appears on the page, there is just nothing on it (i can see it in inspector)
  • Replacing image with simple shapes (Regular.Polygon) works fine.
Solution

  • You need to redraw the layer when an image is loaded:

    playerIcon.onload = function() {
  playerLayer.batchDraw();
}