Rasterize HTML

by pedro_g_s

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.4/rasterizeHTML.allinone.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>

<div id="thehtml">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Pacifico');
    .test {
      background: aqua;
      font-family: 'Pacifico', cursive;
      font-size: 16px;
      color: blue;
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
      border-width: 0px;
      -webkit-font-smoothing: auto;
    }

  </style>
  <div class="test set">Render this</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.drawImage(renderResult.image, 0, 0);
});

html_container.style.display='block'
html2canvas(document.body).then(function(canvas) {
console.log(perf - performance.now())
    document.body.appendChild(canvas);
});