How to get GIF animation to work when converting html to image/canvas

Question

In my application, I'm trying to convert a div to image and download it.

This is my usual div:

<div style="width:200px;height:200px;">
    <div style="width:100px;height:200px;float:left;">
        <img src="images/1.gif">
    </div>

    <div style="width:100px;height:200px;float:left;">
        <h1>Text comes here</h1>
    </div>
</div>

My div usually contains a gif image & I'm using HTML2CANVAS for the convertions. This is my code for converting HTML to Image:

$('.toimage').click(function(){
  html2canvas($('#myDiv'), {
    onrendered: function(canvas) {
      var img = canvas.toDataURL('image/gif');
      console.log(img);
      saveAs(canvas.toDataURL(), 'file.gif');
      // also tested with the code below    
      // saveAs(img, 'file.gif');
    }
  });
});

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

Everything works fine beside the gif animation. I already know in browsers like chrome, firefox & opera, browser ignores canvas.toDataURL('image/gif') and runs canvas.toDataURL('image/png'), so the code would be as: data:image/png;base64 instead of data:image/gif;base64.

But I tested on more browsers and only browser that actually does data:image/gif;base64 is Safari, but my problem is that even that the div has been converted to data:image/gif;base64 my images loses the animation that <img src="images/1.gif"> contains and only the first frame shows up.

Basically what I wish is to have/keep the animation to the image and only use whatever browser that supports that.

Any help and feedback are appreciated and thanks in advance!