JSFiddle - React, Tailwind, and code Playground

by kvazars

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

    </head>

    <body>

        <div class="container-fluid">
            <div id="inser">
                <textarea class="texte form-control" rows="4" cols="50" placeholder="Текст"></textarea>
                <input type="color" id="color">
                <br>
            </div>
        </div>
        <script>
            const font = [
                "https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bold-subset.woff","https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2"
            ];
            const newStyle = document.createElement('style');
            font.forEach(function (val, index) {


                var canv = document.createElement('canvas');
                canv.width = 800;
                canv.height = 200;

                canv.style.width = 1600;
                canv.style.height = 400;
                document.body.appendChild(canv);
                document.getElementById('inser').appendChild(canv);
                newStyle.appendChild(document.createTextNode("\
@font-face {\
    font-family: a" + index + ";\
    src: url(" + val + ");\
}\
"));
                document.head.appendChild(newStyle);

            });


            const all = 1080;

            $(document).ready(function () {


                $(document).on('click', 'canvas', function () {

                    this.toBlob(function (blob) {
                        saveAs(blob, "image.png");
                    });

                });

                var ys = 100;

                function setupCanvas(canvas) {
                    var dpr = window.devicePixelRatio || 2;
                    var rect = canvas.getBoundingClientRect();
                   ...