Canvas Вывод изображений в цикле

[0leg9]

Пытаюсь вывести изображения на холст через цикл. Появляется только последняя картинка. В массиве data содержатся объекты со свойствами: путь к картинке, координаты x и y.

var canvas  = document.getElementById('canvas');
context = canvas.getContext('2d');
var obj;
for (var i = 0; i < data.length; i++) {
   obj = data[i];
   var image = new Image();
   image.src = obj.path;
   image.onload = function() {
      context.drawImage(image, obj.x, obj.y);
   };
};

[0leg9]

В моем случае работает такой код:

var canvas  = document.getElementById('canvas');
context = canvas.getContext('2d');
var obj;
for (var i = 0; i < data.length; i++) {
   obj = data[i];
   draw(obj.path, obj.x, obj.y);
};
function draw (path, x, y) {
   var image = new Image();
   image.src = path;
   image.onload = function() {
      context.drawImage(image, x, y);
   };
};

[рони]

0leg9,
описание вашей проблемы

[Decode]

0leg9, может так у вас должно быть?

var data = ['http://placehold.it/50x50', 'http://placehold.it/100x100'];
var obj = {};

for (var i = 0; i < data.length; i++) {
    obj[i] = data[i];
}

console.log(obj);

[рони]

Decode,
как у него должно он уже решил через замыкание данных строка 6 пост 2

[Decode]

рони, ааа, все понял. Я чет не обратил внимание на второй пост.

[kostyanet]

Появляется только последняя картинка

Когда ваш цикл мгновенно накидал в память отложенных операций, то аргументом obj каждой операции оказался один и то же объект из массива - самый последний. Потому что внутри цикла оно все - референс, ссылка.

Что там дал рони почитать - то будет понятно только тем, кто и так понимает.

Понимать надо разницу между передачей значения переменной по ссылке на переменную - by reference, и копии значения переменной - by value.

Например значения аргументов функции всегда копируются, если не указано иначе. Например в нормальном скрипте типа php:

Каноничная передача by val:

function foo($bar){ $bar.=' jump'; echo $bar;};

само собой значение переменной используемой в качестве аргумента не будет испорчено действиями функции.

$text='How to';

bar($text); // выведет How to jump

echo $text // вывод How to

А вот если передавать по ссылке

function foo(&$bar){ echo $bar;};

то

$text='How to';

bar($text); // выведет How to jump

echo $text // вывод How to jump

то функция "испортит" значение, поменяет его, запишет свое и в таком роде.

На жабе таких примеров не могу привести, она явно не дает определять режим.

Но ясно что внутри цикла все его аргументы крутятся by ref и все нормально работает если копируется в каждой итерации куда-то сразу же, не отходя от кассы (например в хтмл или в консоль). А если не копируется, а откладывается на будущее - то в будущем оказывается копия одного и то же значения у всех отложенных операций. Следовательно все что вам нужно это вручную скопировать текущее значение для будущего применения.

[kostyanet]

через замыкание данных строка 6 пост 2

Забавно. С каких это пор вызов функции сам по себе стал замыканием?

Короче, замыкание у него и так было, просто внутрь ничего не попадало. Это image.onload.

Цикл вряд ли тут вообще нужен, ибо порядок определяет не цикл, а скорость загрузки фоток. Чтобы все было четко по порядку, надо завести загрузку следующей в тот же самый обработчик.

Самый простой пример

var drawPath=function(){
	var canvas  = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	i=0,
	drawImage=function(){
		var obj=data[i++];
		if(obj){
			var image = new Image();
			image.onload=function(){
				context.drawImage(this, obj.x, obj.y);
				drawImage();
			};
			image.src=obj.path;
		}
	};
	drawImage();
};

drawPath();

для проверки

http://jsfiddle.net/z9nk1238/3/

ЗЫ Я сначала подумал что ТС рисует сегменты пути, потом только допер что - обычные фотки.

[laimas]

то функция "испортит" значение

Да уж, определенице ничего не скажешь.

[kostyanet]

Когда нечего сказать - молчат.