Рендеринг одного и того же DIV несколько раз и захват каждого холста

У меня есть один DIV, который может содержать множество разных изображений на основе пользовательского ввода. Когда пользователь завершает настройку приложения, окончательным результатом являются изображения, которые были обработаны (одно за другим) в одном и том же DIV. Для захвата изображения я использую html2canvas. Проблема в том, что как только я запускаю цикл для перерисовки изображений по мере необходимости в div и их захвата, каждый раз фактически захватывается только первое изображение.

Иными словами, функция showShelf() в коде ниже никогда не выполняется.

var exportJSON;
var exportDeviceList;
var renderNumber;
function exportAll()
{
    exportJSON = [];
    exportDeviceList = [];
    renderNumber = 0;
    for (var i = 0; i < devices.length; i++)
    {
        var elements = devices[i].elements;
        for (var j = 0; j < elements.length; j++)
        {
            exportDeviceList.push({site: devices[i].site, device: elements[j].id, name: elements[j].tid, config: elements[j].config});
        }
    }
    renderNext();
}

function renderNext()
{
    site = exportDeviceList[renderNumber].site;
    device = exportDeviceList[renderNumber].device;
    config = exportDeviceList[renderNumber].config;
    showShelf(site,device,config);
    html2canvas(document.getElementById("baseImage"), {allowTaint: true}).then(function (canvas)
    {
        exportJSON.push({tid: exportDeviceList[renderNumber].name, image: canvas.toDataURL("image/png")});
        renderNumber++;
        if (renderNumber < exportDeviceList.length)
        {
            renderNext();
        }
    });
}