programatically add images to canvas in fabricJS - fabricjs

Question

I have an image to be added to a fabricJS canvas. The user will specify the number on times the same image should be added on the canvas.
When I loop through the number of times the user entered and use fabric.Image.fromURL to add, it gets added just once and only to the last location.
EDIT:
Here is the jsfiddle on what I am trying to do
http://jsfiddle.net/apsixion/9g0Lfydw/3/

Answer 1

Here is how I solved it today..
Moved the code to draw the image to a different function outside and called the function in a look. May not be the most optimal solution, but works for me.
// 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/