Как правильно использовать canvas requestAnimationFrame в данной ситуации?

Всем привет! Я новичек в 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