Estou tendo um pouco de dificuldade para tentar implementar o script html2canvas em um loop for.

Eu estou escrevendo uma função JavaScript que usa uma matriz de dados para modificar o estilo de um grupo de elementos, captura a div contêiner como uma tela, converte-o em uma imagem, anexa-o ao corpo do documento e, em seguida, passa para a próxima índice da matriz.

A parte em que estou tendo problemas está no final do meu loop:

html2canvas(document.getElementById("background"), {
    onrendered: function(canvas) {
        var imgdata = canvas.toDataURL("image/png");
        var obj = document.createElement("img");
        obj.src=imgdata;
        document.body.appendChild(obj);
    }
});

Ao percorrer o script, passo a passo, descobri que ele não está esperando que a tela seja renderizada antes de passar para a próxima iteração do loop for. Isso resulta no elemento que estou tentando capturar mudando, mas a cada imagem sendo renderizada procurando exatamente o mesmo (como o índice final na matriz).

Existe uma maneira de atrasar o script por um segundo enquanto a tela é processada? Eu tentei usarsetTimeout() e não consigo encontrar outras maneiras de atrasar o script, não estou familiarizado comonrendered parte do código funciona.

Se minha explicação não estiver clara, prepararei alguns exemplos adequados em breve.