не рисует с onload()

Question

Рисует маленький белый прямоугольник, но не изображение, почему это так и как его исправить.

var imageReady = false; 
img = new Image(); 
img.src = 'player.png'; 
img.onload = loaded(); 

function loaded() { 
imageReady = true; 
redraw(); 
} 

function redraw() { 
    //ctx.fillStyle = "blue"; 
    //ctx.fillRect(0, 0, 500, 500); 

    if (imageReady) { 
     ctx.fillStyle = "white"; 
     ctx.fillRect(10,10,10,10); 
     ctx.drawImage(img, 5, 5); 
    } 
} 

Answer 1

Вы передаете loaded() в onload. Попробуйте пройти img.onload = loaded;

Нравится this (JSFiddle Here).

var imageReady = false; 
img = new Image(); 
img.onload = loaded; 

И еще одно, я предлагаю вам установить onload перед src. Я не знаю, как браузеры загружают внутренне, но MAYBE, он может загружать слишком быстро изображение, и вы отправите нагрузку после загрузки. Это возможно? не знаю.

Редактировать

Да, его лучше также связать функцию обратного вызова img.onload = loaded перед установкой значения src. Просто протестируйте, и если изображение находится в кеше, оно может вызвать onload, прежде чем вы его свяжете.

Answer 2

Вы вызываете свою функцию loaded() и присваиваете img.onload возвращаемому значению этой функции вместо назначения функции img.onload вашей функции. Попробуйте изменить задание:

img.onload = loaded; 

Кроме того, я не уверен, что я вижу смысл вашего imageLoaded флага.