I have a page that has a div element with id='cart' , and i want to be able to take screenshot of this html element. I used html2canvas and it worked fine (code is below) , but it was slow at "rendering " , so i tried dom-to-image library as it came to addresse this slow rendreing of html2canvas , i checked this library and it worked for many poeple , but for me i cant get it to work , it always generates blank white image.

Here is the code snippet i used for dom-to-image:

var cart = document.getElementById('cart')
    domtoimage.toPng(cart)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;                               
        document.getElementById('test').appendChild(img);
    }).catch(function(error) {
        console.error('oops, something went wrong!', error);
    });

the code i used for html2canvas (working):

    $('#cart').html2canvas({
         background :'#0A4361',
         color: '#cce3ff',
         onrendered: function (newCanvas) {
            $('#test img').attr('src',newCanvas.toDataURL());
         }
    });