title: Convert HTML to Image using html2canvas
body: <p>I developed a simple <code>div</code> element which contains text. </p>
  
  <p>I Tried to convert the <code>html</code> to <code>PNG</code> using <code>html2canvas</code> and output it as an image in another image. While running it in my local server , Rendering is initialized successfully based on the console.log </p>
  
  <p><code>118ms html2canvas: Canvas renderer initialized (1350x18 at 8,8) with scale 1</code></p>
  
  <p>But the output image is not appending in the assigned <code>div</code> element. </p>
  
  <p>Any help would be much appreciated!</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction () { 
     html2canvas(document.getElementById("hi"), {
         onrendered: function(canvas) {
             theCanvas = canvas;
             document.body.appendChild(canvas);
             // Convert and download as image 
             Canvas2Image.saveAsPNG(canvas); 
             document.getElementById("img-out").append(canvas);
        }
     });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
     &lt;script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"&gt;&lt;/script&gt;
     &lt;script src="https://html2canvas.hertzen.com/dist/html2canvas.js"&gt;&lt;/script&gt;
  
    &lt;body onload="myFunction()"&gt;
      &lt;div id ="hi"&gt;
        Hi There !
      &lt;/div&gt;
      &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;div id="img-out"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>