html2canvas high resolution rendering

by kalifa17

HTML

<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="dom">
  <div id="wrapper">
  <div id='toCopy'>
  <h2>header</h2>
  <ul>
    <li>first li</li>
    <li>second li</li>
     <li>last li</li>
  </ul>
</div>

</div>
<img src="" alt="" id="image">

</div>

CSS

#wrapper {
  background: yellow;
  width: 15em;
   height: 15em;
   border: 0.1em solid blue;
}
h2{ color: green; font-size: 2em}
li:first-child {color: red;font-size: 1.5em}
li:last-child {color: blue; font-size: 1.3em}

JavaScript

var NORMAL_FONTSIZE = '10pt';
var HIGHRES_FONTSIZE = '20pt';

function setFonSize(elm, fontsize){
	elm.style.fontSize = fontsize;
}

   var $wrapper = document.getElementById('wrapper');
   var setFonSizeOfWrapper = setFonSize.bind(null, $wrapper);
   setFonSizeOfWrapper(NORMAL_FONTSIZE);  // or save the current size for later use
   
   
   /* --- when you want to render with html2canvas --- */
   setFonSizeOfWrapper(HIGHRES_FONTSIZE); //enlarge dom
    html2canvas($wrapper, {
    	onrendered: function(canvas) {
        var image = document.getElementById('image');
        image.src = canvas.toDataURL();
        //now image src is in high res, 
        //and you can scale its size down. e.g: img.width = ...
 
 				setFonSizeOfWrapper(NORMAL_FONTSIZE); //set dom back to normal size
        }
      });