программно добавить изображения на холст в fabricJS

Question

У меня есть изображение, которое будет добавлено к холсту fabricJS. Пользователь будет указывать номер по времени, когда одно и то же изображение должно быть добавлено на холст.

Когда я прокручиваю количество введенных пользователем и использую fabric.Image.fromURL для добавления, он добавляется только один раз и только в последнее место.

EDIT:

Here is the jsfiddle on what I am trying to do 
http://jsfiddle.net/apsixion/9g0Lfydw/3/ 

Answer 1

Вот как я решил сегодня .. Переехал код для отрисовки изображения на другую функцию снаружи, так и называется функцией в взгляде. Не может быть самым оптимальным решением, но работает для меня.

// create a wrapper around native canvas element (with id="c") 
var canvas = new fabric.Canvas('c', { 
    selection: false 
}); 

function drawRectangles(number) { 

    i = 0; 
    var pic = 
     "http://depts.washington.edu/hplab/wordpress/wp-content/uploads/2014/10/smiley-e1415084033498.jpeg"; 
    for (var i = 0; i < number; i++) { 
     var rect = new fabric.Rect({ 
      left: 5 + i * 160, 
      top: 10, 
      width: 150, 
      height: 150, 
      lockRotation: true, 
      lockMovementX: false, 
      lockMovementY: false 
     }); 
     canvas.add(rect); 
    } 
    for (var k = 0; k < number; k++) { 
     drawStars(k); 
    } 
} 

function drawStars(k) { 
    var picStars = 
     "http://reviews.babymonitorsdirect.co.uk/images/5-stars.jpg"; 

    fabric.Image.fromURL(picStars, function (img2) { 

     img2.set({ 
      lockRotation: true, 
      lockMovementX: true, 
      lockMovementY: true, 
      left: 5 + k * 160, 
      top: 10, 
      width: 50, 
      height: 50, 
      lockScalingX: true, 
      lockScalingY: true, 
      selectable: true, 
      hasControls: false 
     }); 
     canvas.add(img2); 

    }); 

} 
drawRectangles(5); 

http://jsfiddle.net/apsixion/z6dq0dp9/2/