html - 外出先でキャンバスに図形を描く

Question

実行すると、ブラウザがしばらくロードされ、キャンバス全体が表示されます。1 回のループ反復が終了したらすぐに表示するにはどうすればよいですか?また、このコードが期待どおりに動作しないのはなぜですか?

これは私のコードです:

  for(var i=0;i<50;i++){
    for(var j=0;j<50;j++){
        ctx.beginPath();
        ctx.fillRect(10*j, 10*i, 10, 10);
        ctx.fillStyle = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
        ctx.fill();
        ctx.closePath();
        sleep(10);
    }
  }


function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
      }
   }
 }

OK ...を使用して目的の効果を達成することができました

window.requestAnimationFrame(draw);

ただし、上記のコードがそのように動作する理由を誰かが説明できますか? キャンバスを表示する前に 2500 個の図形をすべて描画するのはなぜですか?