HTML To PNG.js

var data = '\
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">\
  <foreignObject width="100%" height="100%">\
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1px;">\
      <div style="\
          height: 100em;\
          width: 100em;\
          background: hsl(200,100%,50%);\
          border-radius: 50em;\
          box-sizing: border-box;\
          box-shadow: inset -4em -4em 50em;\
        "></div>\
    </div>\
  </foreignObject>\
</svg>';

var img = new Image();

img.onload = function() {
  console.clear();
  var canvas = document.createElement('canvas');
  canvas.style.height = 0;
  canvas.height = 100;
  canvas.width = 100;
  document.body.appendChild(canvas);
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  console.clear();
  console.log('Done ' + new Date);
  location.href = canvas.toDataURL('image/png');
};

img.src = 'data:image/svg+xml;base64,' + window.btoa(data);