Callback function for Fabric.js renderAll method?

Question

I'm using Fabric.js and need to call a function after renderAll has fully completed. This seems like simple functionality that would exist, but my searches, documentation reading, etc. has come up empty. If anyone has a solution, I'd greatly appreciate it.

canvas.deactivateAll().renderAll();
// I need a save function called here, after the above has completed

I've tried binding to the after:render method of the canvas, but that gets called with each object, rather than all objects.

canvas.on('after:render', function() {
  // call the save function here
});

I suppose what I could do is count the number of canvas objects, then increment a counter on the after:render method, then check to see if the counter === the number of objects, and if it does, then call the save function. That seems rather convoluted to me though.

(As more background, in case there is another way to achieve what I need, I need to save a canvas image, but first need to deselect all objects so the image isn't saved with the handles showing.)

Answer 1

I found a solution using the deactivateAllWithDispatch method, which fires the selection:cleared listener event. In that event function, I'm executing the deactivateCallback method if it's set.

canvas.on('selection:cleared', function() {
  if (deactivateCallback) {
    executeCallbackFunction(renderCallback, window);
    deactivateCallback = null;
  }
});

deactivateCallback = callback;
canvas.deactivateAllWithDispatch();

(note: the executeCallbackFunction in the above code isn't directly related to the answer, and just executes a function that has been passed in as a string)

Answer 2

So what you need is to deactivate all elements. I don't know why canvas.deactivateAll() isn't ok. Does this jsFiddle help you.