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" ></canvas>

<html>
            <head>
                <meta charset="UTF-8"/>
                <style>
                    * { 
                        margin: 0; 
                        padding: 0; 
                        box-sizing: border-box;
                        border-width: 0px;
                        font-smooting: auto;
                        -webkit-font-smoothing: auto;
                        word-break: break-word;
                    }
                    #container {
                        width: 173px;
                        height: 28px;
                        position: absolute;
                        top: 28px;
                    }
                </style>
                </head>
            <body>
                <div id="container">
                <span style="font-family: Helvetica; color: rgb(0, 0, 0); font-size: 24px;">aaaaaaaaaaaa i</span>
                </div>
            </body>

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;
                        font-smooting: auto;
                        -webkit-font-smoothing: auto;
                        word-break: break-word;
                    }
                    #container {
                        width: 173px;
                        background: blue;
                    }
                </style>
                </head>
            <body>
                <div id="container">
                <span style="font-family: Helvetica; color: rgb(0, 0, 0); font-size: 24px;">aaaaaaaaaaaa i</span>
                </div>
            </body>
`;
rasterizeHTML.drawHTML(html, canvas);