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="2048" height="2048" style="border: 1px solid black;"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
  context = canvas.getContext('2d');
const html = `
			 <html>
            <head>
                <meta charset="UTF-8"/>
                <style>
                    * { 
                        margin: 0; 
                        padding: 0; 
                        box-sizing: border-box;
                        border-width: 0px;
                    }
                    body {
                        width: 793px;
                        height: 1024px;
                    }
                    #container {
                        top: 125.8615493774414px;
                        left: 634.1115112304688px;
                        position: absolute;
                        background-color: red;
                    }
                </style>
                </head>
            <body>
                <div id="container">
                <span style="font-family: Helvetica; color: rgb(0, 0, 0); font-size: 24px;">asdfasdf</span>
                </div>
            </body>
`;
rasterizeHTML.drawHTML(html, canvas);