Perform a function after two element's onrendered event

Question

I want to perform Line 16-19 only after two onrendered event of "#front" and "#back". How will I do that?

1.    function myid_print_id() {
2.        var front, back;    
3.        html2canvas($('#front'), {
4.            onrendered: function(canvas) {         
5.                front = canvas.toDataURL("image/png");           
6.            }
7.        });  
8.
9.        html2canvas($('#back'), {
10.            onrendered: function(canvas) {           
11.               back = canvas.toDataURL("image/png");          
12.            }
13.        });   
14.
15.        //Perform commands after two element's onrendered event
16.        link = "about:blank";
17.        var pw = window.open(link, "_new");
18.        pw.document.open();
19.        pw.document.write(makepage(front,back)); 
20.    }

Answer 1

Try something like this

function myid_print_id() {
    var front, back;

    var my_function = function (front, back) {
        var link = "about:blank";
        var pw = window.open(link, "_new");
        pw.document.open();
        pw.document.write(makepage(front, back));
    };

    html2canvas($('#front'), {
        onrendered: function (canvas) {
            front = canvas.toDataURL("image/png");
            if (back)
                my_function(front, back);
        }
    });

    html2canvas($('#back'), {
        onrendered: function (canvas) {
            back = canvas.toDataURL("image/png");
            if (front)
                my_function(front, back);
        }
    });

}