Изображение на холсте не рисуется?

Question

Код, который я использую для загрузки двух изображений (обратите внимание, что одно изображение - 7 МБ (я знаю - исправлю его позже)).

var loaded = 0; 
var img1 = new Image(); 
var img2 = new Image(); 
img1.onload = function(){ both() }; 
img2.onload = function(){ both() }; 
img1.src = 'map.png'; 
img2.src = 'ovl.png'; 

function both() { 
    loaded++ 
    console.log(loaded); 
    if (loaded == 2) { 
     console.log("LOADED"); 
     resizeCanvas(); 
     console.log("RESIZED"); 
    } 
} 

function resizeCanvas() { 
    //resize code 
    drawStuff(); 
} 
function drawStuff() { 
    console.log("DRAWSTART"); 
    ctx.save(); 
    ctx.setTransform(1,0,0,1,0,0); 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillStyle="#868f9c"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.restore(); 
    ctx.drawImage(img1, 0,0); 
    ctx.drawImage(img2, 0,0); 
    console.log("DRAWED"); 
} 

Как и ожидалось, выход на консоль;

(index):28 1 
(index):28 2 
(index):30 LOADED 
(index):81 DRAWSTART 
(index):90 DRAWEND 
(index):64 RESIZED 

Но изображения нигде не встречаются в большинстве случаев. Иногда они появляются через ~ 30 секунд, но затем никакие другие функции не работают (у меня также есть возможность панорамирования и масштабирования).

Обратите внимание, что если я прокомментирую один из ctx.drawImage(img[1,2], 0,0);, он отлично работает. Кажется, что рисование двух изображений просто не работает ...

Answer 1

Вы должны сначала проверить мелкие изображения, чтобы проверить, все ли в порядке. Затем для управления большими изображениями вы можете использовать библиотеку предварительной загрузки, например http://www.createjs.com/preloadjs