javascript - キャンバス ゲームは、ウィンドウが非アクティブなときにのみ描画を開始します

Question

キャンバス コードに奇妙な点があることに気付きました。小さな空飛ぶ幽霊を使ったゲームを作成しています。ゴーストのクラスは次のとおりです。コードを手動で追加し、たとえばフレームごとに x を更新して em を右に飛ばして 1 つまたは 2 つの em を描画すると、すべてがスムーズに正常に実行されます。

ここで別のテストを実行し、100 フレームごとにゴーストを配列に追加し、その x を 100 で更新してから、そのゴーストをフレームに描画しました。(コードは最初のブロックである draw 関数の下にあります)。

問題は、それらが実際に追加および描画されることですが、たとえばタスクバーをクリックしてウィンドウを非アクティブにするまで、ボード上に表示されません。

Any1 はここで何がうまくいかないのか手がかりを得ましたか?

    /* 
 * Class for little ghosts
 */
function Ghost (name) {
    this.name = name;
    this.ghost = new Image();
    this.ghost.src = "img/ghost.png";
    this.ghostWidth = 150;
    this.ghostHeight = 100;
    this.ghostSpriteOffsetX = 0;
    this.ghostSpriteOffsetY = 0;
    this.ghostX = 0;
    this.ghostY = 0;
}
Ghost.prototype.drawGhost = function() {
    context2D.drawImage(this.ghost, this.ghostSpriteOffsetX, this.ghostSpriteOffsetY, this.ghostWidth, this.ghostHeight, this.ghostX, this.ghostY, this.ghostWidth, this.ghostHeight);
};
Ghost.prototype.goToX = function(x) {
    this.ghostX = x;
};
Ghost.prototype.goToY = function(y) {
    this.ghostY = y;
};
Ghost.prototype.turnPink = function() {
    this.ghostSpriteOffsetX = 0;
};
Ghost.prototype.turnBlue = function() {
    this.ghostSpriteOffsetX = 150;
};
Ghost.prototype.turnPurple = function() {
    this.ghostSpriteOffsetX = 300;
 };

-

function draw()
{
// clear board
context2D.clearRect(0, 0, canvas.width, canvas.height);

if(frame%100==0){
    ghosts[ghostId] = new Ghost("g-"+frame);
    ghosts[ghostId].goToX(frame-100);
    ghostId++;
}
// Draw ghost
for (i=0; i<ghosts.length; i++)
{
    ghosts[i].drawGhost();
}



frame++;
}