Как добавить html2canvas к dom-to-image?

Когда делаю скрин dom-to-image все нормально, но не во всех браузерах работает. Пытаюсь добавить html2canvas, чтобы скрины делать отдельно для safari, но они выходят криво, а в safari вообще только первая картинка получается. Не могу понять что я делаю не так, может кто то может подсказать? Пример можно посмотреть по ссылке dom-to-image and html2canvas Для просмотра изображений кликай NEXT

// Function-interface for creating images in different projections
function iMakePhotos( /*[Object] event*/ e, /*[Function] calback*/ callback ) {
    var callback = callback || false;
    cnv.discardActiveObject();
    cnv.renderAll();
    cnv.setDimensions({
        width: 1010,
        height: 800
    });
    var states = [1, 2, 3, 4, 5],
    targetElem = document.querySelector('.canvas-block__draw-place');
    window.projectionPng = [];
    targetElem.setAttribute('makephotos', '');
    cnv.height = 800;
    cnv.width = 1010;
    _windowResize(e);
    makePhotos( states, targetElem, callback );
}
// /Function-interface for creating images in different projections
// Recursive function for creating images of different projections
function makePhotos( /*[Array] number*/ states, /*[Object] DOM*/ targetElem, /*[Function] calback*/ callback ) {
    setOverlay();
    var state = states.shift();
    preloader(true, state);
    targetElem.setAttribute('state', ''+state);
    whiteOverlay();
    renderSpine();
    if ( state === 2 ) {
        genereteCanvasProjectionImage(120, 200, genereteCanvasProjectionImage_callback);
        functionHtmlToCanvas();
    }
    else if ( state === 4 ) {
        genereteCanvasProjectionImage(120, 250, genereteCanvasProjectionImage_callback);
        functionHtmlToCanvas();
    }
    else {
        genereteCanvasProjectionImage(null, null, genereteCanvasProjectionImage_callback);
        functionHtmlToCanvas();
    }
    function functionHtmlToCanvas(){
        html2canvas(targetElem, {
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
            }
        });
    }

    function genereteCanvasProjectionImage_callback() {
        domtoimage
            .toPng(targetElem)
            .then(function (dataUrl) {
                var tmp_obj = {
                    title: 'state-' + state + '.png',
                    href: dataUrl
                };
                var img = new Image();
                img.src = dataUrl;
                DEBUG && document.getElementById("newImgArr").appendChild(img);
                window.projectionPng.push(tmp_obj);
                if ( states.length > 0 ) {
                    makePhotos( states, targetElem );
                }
                else {
                    targetElem.removeAttribute('makephotos');
                    targetElem.setAttribute('state', '1');
                    _windowResize();
                    _windowResize();
                    _windowResize();
                    preloader(false);
                    requestOnServer();
                }
            });
    }
}
// /Recursive function for creating images of different projections
// created tepmorary Image for generete canvas screenshot in perspective
var temporaryImage = new Image();
temporaryImage.id = "temporaryImage";
// Function for render perspective without css perspective
// @return Object
genereteCanvasProjectionImage = function( /*number*/ x, /*number*/ y, /*[Function]*/ callback){
    var elem = document.getElementById('temporaryImage');
    elem && elem.parentNode.removeChild(elem);
    document.querySelector('.canvas-container').style.display = "block";

    if ( x && y ) {
        var canvasBlockDraw = d.querySelector('.canvas-block__draw');
        var x = x || 0;
        var y = y || 0;
        cnvPlace.classList.add('forSnapshot');
        spineDisplay( 'none' );
        domtoimage
        .toPng(cnvPlace)
        .then(function(dataUrl){
            temporaryImage.src = dataUrl;
            return new Promise(function(resolve,reject) {
                temporaryImage.onload = function() {
                    DEBUG && console.log("resolved");
                    resolve();
                }
            });
        })
        .then(function(){
            var cfx = fx.canvas();
            var texture = cfx.texture(temporaryImage);
            cfx.draw(texture).perspective(
                [0, 0, 1009, 0, 0, 799, 1009, 799],
                [0 + x, 0 + y, 1009 - x, 0 + y, 0 - x / 1.5, 799 - y / 1.5, 1009 + x / 1.5, 799 - y / 1.5],
            ).update();
            temporaryImage.src = cfx.toDataURL('image/png');
            spineDisplay( 'block' );
            canvasBlockDraw.appendChild(temporaryImage);
            document.querySelector('.canvas-container').style.display = "none";
            cnvPlace.classList.remove('forSnapshot');
        })
        .then(function(){
            if ( 'function' === typeof callback ) {
                callback();
            }
        })
        .catch(function( e ){
            log( 'Error:', e );
        });
    }
    else if ( 'function' === typeof callback ) {
        callback();
    }
};