Всем привет! Я новичек в JS и изучаю Canvas. Вот столкнулся с недопонимаем работы отрисовки картинок drawImage() совместно с requestAnimationFrame. Подскажите пожалуйста как поступить в данной ситуации.
Для экспериментов пытаюсь двигать картинки.
Проблема заключается в том, что картинки не отображаются, они не успевают заглузиться, так как при рисовании простого квадрата все работает.
При вызове функции init() они не отображаются, а при вызове update все работает. Как исправить данную ситуацию именно для этого кода (я уточняю, что именно для этого случая, так как элементарую работу отрисовки картинки понимаю)? И кто может обьяснить, почему на JSfiddle код работает, а в браузере нет?
function init(){
object.x = 0;
object.y = 0;
object.draw();
loadImage(imgArray);
for(var i = 0; i < IMG.length; i+=1){
object.x += 10 * i;
object.drawImage(IMG[i]);
};
};
function update(){
ctx.clearRect(0,0,canvas.width, canvas.height);
object.x +=1;
object.y +=1;
object.draw();
for(var i = 0; i < IMG.length; i+=1){
object.x += i;
object.drawImage(IMG[i]);
};
window.requestAnimationFrame(update);
};
Полный код можно увидеть ниже.
Пример на JSfiddle 
