How to capture the onRendered event from a canvas?

Question

How to know if the canvas is ready?

I’m using the library fabricjs, that creates a complex element structure within a canvas, but I’d like to call a callback function after the canvas had all the complex elements loaded.

html2canvas does something similar, but it doesn’t work with fabricjs:

html2canvas($('#my_canvas'), {
   onrendered: function(canvas) {
   //SIMILAR A ISSO
  }
});

What I can get is the total elements of my canvas:

 var totalItens = canvas.getObjects().length;

And I’m processing a time based on quantity, the problem is that there may be a single very complex item, and the action may not behave well while still being loaded in the browser:

var calc = (totalItens * 400), 
    tempoDoProcesso = (calc) > 6000 ? 6000 : calc

setTimeout({
 //faço a ação...
}, tempoDoProcesso);

The canvas starts to hang when it has many items on the screen... and so it is impossible to do any event before the process has finished.

Answer 1

Hello Ivan and for other programmers.

Reading the event documentation on the Fabric.js website will understand everything.

Before using a new javascript library read the documentation to use correctly and there are no problems.

Solution:

var canvas = new fabric.Canvas('my-canvas');
canvas.on("after:render",function() {
  console.log("render on")
});

Source: https://github.com/fabricjs/fabric.js/wiki/Working-with-events