JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <h3 style="color:blue">My Title</h3>
        <div style="color:red">
            My Text
        </div>
        <button onclick="export1()">Export Plain Html</button>
        <button onclick="export2()">Export Entire Document</button>
    </div>

JavaScript

function export1() {
        const html = '<div style="color:red">this is <br> sparta </div>';
        renderHtmlToImage(html, 800, 600, "image/png");
    }

    function export2() {
        renderDocumentToImage(window.document, 800, 600, "image/png");
    }
    // format is: image/jpeg, image/png, image/svg+xml
    function exportImage(base64data, width, height, format) {
        var img = new Image();
        img.onload = function () {
            if ("image/svg+xml" == format) {
                var w = window.open("");
                w.document.write(img.outerHTML);
                w.document.close();
               
            }
            else {
                const canvas = document.createElement("Canvas");
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0);
                var exportImage = new Image();
                exportImage.onload = function () {
                    var w = window.open("");
                    w.document.write(exportImage.outerHTML);
                    w.document.close();
                }
                exportImage.src = canvas.toDataURL(format);
            }
        }
        img.src = base64data;
    }

    // format is: image/jpeg, image/png, image/svg+xml
    function renderHtmlToImage(html, width, height, format) {
        var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">'
            + '<foreignObject width="100%" height="100%">'
            + html2SvgXml(html)
            + '</foreignObject>'
            + '</svg>';
        var base64data = "data:image/svg+xml;base64," + btoa(svgData);
        exportImage(base64data, width, height, format);
       
    }

    function renderDocumentToImage(doc, width, height, format) {
        var svgData =...