Taking screenshot of my current webpage and saving it

Question

I have created a webpage with a mail button at the top.

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px;padding:2px 4px 1px 4px" onclick="genScreenshot()">
   <span class="glyphicon glyphicon-envelope"></span>
</button>

And the next two html lines for my on click function.

<a id="test"></a>
<div id="box1"></div>

Now when I click this button it should take a screen shot the current page and save it as an image. For taking screenshot I searched through google and obtained this CSS code.

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">                                                                                                             
   function genScreenshot() {
      html2canvas(document.body, {
       onrendered: function(canvas) {
         $('#box1').html("");
         $('#box1').append(canvas);

         if (navigator.userAgent.indexOf("MSIE ") > 0 || 
         navigator.userAgent.match(/Trident.*rv\:11\./)) 
         {
           var blob = canvas.msToBlob();
           window.navigator.msSaveBlob(blob,'Test file.png');
         }
         else {
           $('#test').attr('href', canvas.toDataURL("image/png"));
           $('#test').attr('download','screenshot.png');
           $('#test')[0].click();
         }
      }
  });
}          
</script>

But I'm not getting the screenshot, please help me out here. I'm new to stack over flow so please forgive my grammar mistakes and I would really appreciate if someone changes the question format. Thank you all in advance.