Estoy teniendo algunos problemas al intentar implementar el script html2canvas en un bucle for.

Estoy escribiendo una función de Javascript que usa una matriz de datos para modificar el estilo de un grupo de elementos, captura el div contenedor como un lienzo, lo convierte en una imagen, lo agrega al cuerpo del documento y luego pasa al siguiente. índice de la matriz.

La parte en la que tengo problemas está al final de mi bucle:

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);
    }
});

Al analizar el script paso a paso, descubrí que no está esperando que el lienzo se renderice antes de pasar a la siguiente iteración del bucle for, esto da como resultado que el elemento que intento capturar cambia, pero cada La imagen se representa exactamente igual que el índice final de la matriz.

¿Hay alguna forma de retrasar la secuencia de comandos durante un segundo mientras se renderiza el lienzo? He intentado usarsetTimeout() y parece que no puedo encontrar otras formas de retrasar el guión, no estoy familiarizado con la forma en queonrendered parte del código funciona.

Si mi explicación no está clara, prepararé algunos ejemplos adecuados pronto.