Rasterize HTML

by Alexandru Mihai

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>

<div id="thehtml" style="display: none;">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Pacifico');
    .test {
      background: aqua;
      font-family: 'Pacifico', cursive;
      font-size: 16px;
      color: blue;
    }

  </style>
  <div class="test set">Render this</div>
  <div class="test set">Render this</div>
  <div class="test set">Render this</div>
  <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
    <g stroke="green" fill="white" stroke-width="5">
      <circle cx="25" cy="25" r="15" />
      <circle cx="40" cy="25" r="15" />
      <circle cx="55" cy="25" r="15" />
      <circle cx="70" cy="25" r="15" />
    </g>
  </svg>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Pacifico');
div {
  background: aqua;
  font-family: 'Pacifico', cursive;
  font-size: 36px;
  color: blue;
}

JavaScript

var canvas = document.getElementById("canvas"),
  context = canvas.getContext('2d'),
  html_container = document.getElementById("thehtml"),
  html = html_container.innerHTML;
const perf = performance.now()
/*
rasterizeHTML.drawHTML(html).then(function(renderResult) {
  context.filter = "blur(1px)";
  context.drawImage(renderResult.image, 0, 0);
  console.log(perf - performance.now())
});
*/
html_container.style.display='block'
html2canvas(document.body).then(function(canvas) {
console.log(performance.now() - perf)
    document.body.appendChild(canvas);
});