Konva.js - draw on stage in time interval loop - konvajs

Question

I am trying to draw multiple rectangles in time loop every 250ms using Konva.js, but the canvas updates only after loop is finish. What am I doing wrong?
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
for (let i=0; i < 10; i++){
var rect1 = new Konva.Rect({
x: i*25,
y: 20,
width: 20,
height: 20,
fill: 'red'
});
layer.add(rect1);
layer.draw();
sleep(250);
}

Answer 1

Your sleep method blocks main JS thread. You need to use async methods to wait. There are many ways to do that. With modern js you can do this:
// noprotect
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const delay = (time) => new Promise(resolve => setTimeout(resolve, time));
async function startAddingShapes() {
for (let i=0; i < 10; i++){
const rect = new Konva.Rect({
x: i*25,
y: 20,
width: 20,
height: 20,
fill: 'red'
});
layer.add(rect);
await delay(250);
}
}
startAddingShapes();
Demo: https://jsbin.com/sahamulako/1/edit?html,js,output