JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<div id="root">
    <div id="dom-content">
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
    </div>
</div>
<button onclick="exportToImage()">draw</button>
<div class="image">
    <canvas id="canvas" width="100" height="100"></canvas>
</div>

CSS

* {
    box-sizing: border-box;
}
#root {
    height: 100px;
    width: 100px;
}
#dom-content {
    border: 3px solid black;
    height: 100%;
}
.red {
    background-color: red;
}
.green {
    background-color: lightgreen;
}
.blue {
    background-color: lightblue;
}
.red, .green, .blue {
    height: 33.333333%;
    width: 100%;
}
.image {
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

JavaScript

(function (global) {
    "use strict";

    function copyCSS(elem, origElem, log) {

        var computedStyle = global.window.getComputedStyle(origElem, null);

        console.log(computedStyle);
        //console.log("cssText: " + computedStyle.cssText);

        function copyComputedStyle() {
            for (var i = computedStyle.length; i > 0; i--) {
                var name = computedStyle[i];
                elem.style.setProperty(name,
                    computedStyle.getPropertyValue(name),
                    computedStyle.getPropertyPriority(name)
                );
            }
        }

        function copyComputedStyle2() {
            for (var prop in computedStyle) {
                if (isNaN(parseInt(prop, 10)) && typeof computedStyle[prop] !== 'function' && !(/^(cssText|length|parentRule)$/).test(prop)) {
                    elem.style[prop] = computedStyle[prop];
                }
            }
        }

        if (computedStyle.cssText) {
            elem.style.cssText = computedStyle.cssText;
        } else {
            copyComputedStyle();
        }
    }

    function inlineStyles(elem, origElem) {

        var children = elem.querySelectorAll('*');
        var origChildren = origElem.querySelectorAll('*');

        // copy the current style to the clone
        copyCSS(elem, origElem, 1);

        // collect all nodes within the element, copy the current style to the clone
        Array.prototype.forEach.call(children, function (child, i) {
            copyCSS(child, origChildren[i]);
        });

        // strip margins from the outer element
        elem.style.margin = elem.style.marginLeft = elem.style.marginTop = elem.style.marginBottom = elem.style.marginRight = '';

    }

    function init() {
        return {
            toImage: function (origElem, callback, width, height, left, top) {

                left = (left || 0);
                top = (top || 0);

                var elem = origElem.cloneNode(true);

            ...