fabris.js - know canvas activity - fabricjs

Question

i am running several JavaScript functions in parallel. some of them download images from and add them to the canvas. other functions draw rectangles on the same canvas.
now, what i dont know is when each function has completed adding their "stuff" to the canvas.
so my question is that is there a way to know if the canvas is "busy" or all operations are done and it's idle.
knowing so will help me code loader windows more efficiently.
any help appreciated.

Answer 1

Nothing find showing that canvas is busy in adding/updating/moving but i have an idea here
you can use
canvas.requestRenderAll()
all over instead
canvas.renderAll();
that will keep queued render request if already there is request in progress.
now there are two events
after:render at the end of the render process,event: receives the context in the callback
before:render at start the render process,event: receives the context in the callback
ref http://fabricjs.com/docs/fabric.Canvas.html
using before:render show loader and in after:render with settimeout 100mili sec you can stop loader.
Hope this idea works.
If not please message will try myself

Answer 2

Fabric.js uses callbacks to execute code after performing asynchronous operations. An example would be loading an image which shouldn't be added to a canvas until after the image has loaded.
fabric.Image.fromURL(imageURL, function(image) {
//this is the callback that is executed after the image has loaded.
//include any actions here that you want performed after loading the image
image.set({ left: 50, top: 50, width:50, height:50 });
canvas.add(image);
});
If you have a list of images you want to load, you can use a recursive function that executes the callback only when the list is complete. Something like this should work:
var images = [src1, src2, src3];
var x = -1;
loopImages(function() {
//include any actions here that you want performed after loading all images
alert('All done!');
});
function loopImages(callback) {
x++; //iterates current index on each loop
if (x < images.length) {
fabric.Image.fromURL(images[x], function(image) {
image.set({
left: 50,
top: 50,
width: 50,
height: 50
});
canvas.add(image);
loopImages(callback);
});
} else {
callback();
}
}