JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>rasterizeHTML.js example</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/rasterizeHTML.allinone.js"></script>
    <style>
        canvas {
            display: block;
            box-sizing: border-box;
        }
        textarea, canvas {
            width: 600px;
            height: 40px;
            background: red;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <p><span style="background: yellow; font-family: Helvetica; font-size: 24px; color: rgb(0, 0, 0);">1111111111</span></p>
                <div id="container">`
                <span style="font-family: Helvetica; color: rgb(0, 0, 0); font-size: 24px;">1111111111</span>
                </div>

    <script type="text/javascript">

        var backingScale = function () {
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                return window.devicePixelRatio;
            }
            return 1;
        };
        var parsePixelValue = function (value) {
            return parseInt(value, 10);
        };
        var scaleCanvasForRetina = function (canvas) {
            var scaleFactor = backingScale(),
                canvasStyle = window.getComputedStyle(canvas);

            canvas.width = parsePixelValue(canvasStyle.width) * scaleFactor;
            canvas.height = parsePixelValue(canvasStyle.height) * scaleFactor;
        };

        var drawHTML = function () {
            var scaleFactor = backingScale();
						const htmlToDraw = `
	 <html>
            <head>
                <meta charset="UTF-8"/>
                <style>
                    * { 
                        margin: 0; 
                        padding: 0; 
                        box-sizing: border-box;
                        border-width: 0px;
                        font-smoothing: auto;
                        -webkit-font-smoothing: auto;
                       ...

CSS

#container {
  margin-top: -21px;
  background: blue;
}