JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div id="download">
      <h1 id="test">Testing Download</h1>
   </div>
   
	<center>
		<button id="download-window" class="download-btn">New Window</button>
		<button id="download-png" class="download-btn">Download png</button>
		<button id="download-jpg" class="download-btn">Download jpg</button>
		<button id="download-pngx2" class="download-btn">Download pngx2</button>
	</center>

CSS

#download{
		margin:10% 20%;
	}
	.download-btn{
		padding:10px;
		font-size:20px;
		margin:0 20px;
	}
	#test{
		background:#3399cc;
		padding:50px;
	}
	.x2{
		transform: scale(2,2);
	}

JavaScript

$('#download-pngx2').click(function(){
		 $('#download').addClass('x2');
     
     html2canvas($('#download')).then(function (canvasfront) {
               
                    var img = canvasfront.toDataURL();       
                   console.log(img)
            });
     
            
		
			
  
  });