Html2Canvas delay in rendering images and not in a sequence

Question

I am having problems with Html2canvas render as i want to take multiple screenshots of an image and send the same to the selected contacts in a sequence but Html2canvas is rendering images in a delayed and unsequential way, which in return is not able to send the image to corresponding selected contact. Below is my code it is running successfully but the delay and unsequential output is creating a lot of problem.

function printCards(calle, eventID){
    var cards = new Array();

    var checkboxArray = $("input[name='contactsParty']:checked");

    $('#inviteContactName').html($(checkboxArray[0]).parent().prev().children('label').text());

        //  iterating selected checkboxes for invitation
        checkboxArray.each(function(index, value){


            //  getting name of next contact selected
            var name = $(checkboxArray[index+1]).parents().eq(1).find('label').text();


            //  Getting invitation card
            var invitationCard;
            $.when(invitationCard = getImage(name)).promise().done(function(){
                //  saving the printed invitation
                cards.push(invitationCard);
            });

        });

    return cards;   

}

//  printing invitation card with contact name
function getImage(name){

    var invitationCard = new Image();


        html2canvas($("#invitationData"), {
//          logging : true,
            onrendered: function(canvas) {
                //  For image`enter code here`
                var ctx=canvas.getContext("2d");
//              ctx.webkitImageSmoothingEnabled = false;
//              ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var convertedImage;
                $.when(convertedImage = canvas.toDataURL('image/jpg')).promise().done(function(){
                    invitationCard.src = convertedImage;
                    $('#inviteContactName').html(name);
                });  
//              setTimeout(function (){}, 500);
            }

        });

    return invitationCard;

}

Answer 1

This issue has been resolved in the upcoming release of html2canvas, as this issue has been raised earlier many times at developer's site. you just have to wait for the final release for production or you can try the beta version of it.

P.S - current release is for development purposes only and not for production. (This should be a comment but i dont have that much reputation.)