[Makkssimka]

Есть скрипт который делает ресайз изображения через canvas:

$('#image').change(function(){
			var files = $(this)[0].files;
			for(var i = 0; i < files.length; i++){
				var file = $(this)[0].files[i];
				var fileURL = getBlobURL(file);
				
				$("#canvasList").append('<canvas id="canvas'+i+'" width="0" height="0"></canvas>')
				
				var canvas = $("#canvas"+i+"")[0];
				var context = canvas.getContext("2d");
				
				var img = new Image();
				img.src = fileURL;
				console.log(img);
				
				img.onload = function(){
					var width = img.width;
					var height = img.height;
					
					if(height>width){
						heightRe = 1080;
						widthRe = (heightRe*width)/height;
						}
					else{
						widthRe = 1920;
						heightRe = (height*widthRe)/width;
						}
						
					canvas.width = widthRe;
					canvas.height = heightRe;
					context.drawImage(img,0,0,widthRe,heightRe);
				};
			}

Выводится Только последнее изображение, все остальные canvas'ы имеют высоту и ширину 0. Почему так?