Como saber se o canvas está pronto?
Estou utilizando a biblioteca fabricjs, que cria uma estrutura de elementos complexos dentro de um canvas, porém eu gostaria de chamar uma função callback depois que o canvas tivesse todos os elementos complexos carregados.
O html2canvas faz algo similar, porém não funciona com o fabricjs:
html2canvas($('#my_canvas'), {
onrendered: function(canvas) {
//SIMILAR A ISSO
}
});
O que eu consigo ter é o total de elementos do meu canvas:
var totalItens = canvas.getObjects().length;
E estou processando um tempo baseado na quantidade, o problema é que pode haver 1 único item muito complexo, e a ação pode não ter um bom comportamento enquanto ainda estiver sendo carregada no navegador:
var calc = (totalItens * 400),
tempoDoProcesso = (calc) > 6000 ? 6000 : calc
setTimeout({
//faço a ação...
}, tempoDoProcesso);
O canvas começa a travar quando tem muitos itens na tela... e por isso, fica impossível fazer qualquer evento antes do processo ter finalizado.
canvas.on("after:render", function() {})
. Fonte: github.com/fabricjs/fabric.js/wiki/Working-with-events