javascript - 毎回HTML5キャンバスに画像が描画されない

Question

私は、ユーザーがテキストや画像を保持できる単純なオブジェクト（長方形）を含むメッシュを構築できるWebアプリに取り組んでいます。ユーザーはこれらのオブジェクトを好きなだけ作成でき、画像を保持できる各オブジェクトに、独自のオブジェクトをアップロードできます。テストしたい場合、アプリはオンラインです：goalcandy.com （ログインするには、emailフィールドとpswdフィールドにdemo@demo.com / demoを使用してください） 。

作業が完了したら、そのメッシュをPNGに変換できます。これは、最初にメッシュ上にあるすべてのものをHTMLキャンバスに描画し、その後ローカルでPNG画像に変換することによって行われます。

既存の画像の配列をキャンバスに描画する必要がある場合、最初にそれらをプリロードする必要があります。これは次のようになります。

query = [];   // array with paths to the image

var count = query.length,
    images = [],
    loaded = 0;

for (i=0; i<count; i++) {
    images[i] = new Image();
    images[i].onload = function(){
        loaded++;
        if (loaded == count)
                           drawOnCanvas();
    };
    images[i].src = query[i];
}

function drawOnCanvas() {
        // draw the images onto the canvas
}

これらすべての問題は、低速の「疲れた」コンピュータでは、画像がキャンバスに描画されないため、ユーザーがアップロードした画像があるはずのスペースでPNGが空白になることがあることです。ダウンロードが完了していないかのように。優れた高速コンピュータでは、これは起こりません。どうすればこれを解決できますか、またなぜそれが起こるのですか？「load」イベントのハンドラーを既にアタッチしていることを考えると、ロジックが表示されません...