JSFiddle - React, Tailwind, and code Playground

by moonyuet

HTML

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.max.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>

</head>

<body>
    <div id="c-left">
        <canvas id="canvas" ></canvas>
<script type="text/javascript">

</script>
   
    </div>

    <div id="c-right">
        <input type="file" id="file">
        <input type="color" id="fill" />
        <select id="font">
  <option>arial</option>
  <option>tahoma</option>
  <option>times new roman</option>
</select>
        <button onclick="addText()">Add Custom Text</button>
        <button class="delete_object">Delete</button>
        <a id="lnkDownload" href="#">Save image</a>

        <canvas id="canvas2"></canvas>


    </div>
</body>

</html>

CSS

#canvas {
            width: 100%;
            height: 100%;
        }
        
        #c-left,
        #c-right {
            position: relative;
            display: inline-block;
            height: 100%;
            width: 50%;
        }
        
        #c-right {
            float: right;
            left: 80px;
        }
        
        #lnkDownload {
            border: 1px solid rgb(196, 196, 196);
            text-decoration: none;
            color: rgb(48, 47, 47);
            font-weight: bold;
            background-color: rgb(197, 197, 197);
            padding: 10px;
            margin-top: 15px;
            display: inline-block;
        }

JavaScript

window.addEventListener("DOMContentLoaded", function() {
    var canvas = document.getElementById("canvas");
    var engine = new BABYLON.Engine(canvas, true);
     

    var createScene = function() {
        var scene = new BABYLON.Scene(engine);

        engine.enableOfflineSupport = false;
        var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(0), BABYLON.Tools.ToRadians(0), 10.0, BABYLON.Vector3.Zero(), scene);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.attachControl(canvas, true);

        camera.keysLeft.push(45);
        camera.keysRight.push(45);

        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);


        var canvasSecond = document.getElementById("canvas2");
        canvasSecond.width = 1024;
        canvasSecond.height = 1024;


        //canvas
        var canvasSec = new fabric.Canvas('canvas2');
        fabric.Image.fromURL("https://raw.githubusercontent.com/moonyuet/shirtCongrJS/main/textures/shirt_diffuse1.png?raw=true", function(img2) {
        		
            var img3 = img2.set({ selectable: false });
            canvasSec.add(img3).renderAll();
            


        });

        //FileReader
        document.getElementById('file').addEventListener("change", function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            //console.log("reader   " + reader);
            reader.onload = function(f) {
                var data = f.target.result;
                fabric.Image.fromURL(data, function(img) {
                		
                    var Img2 = img.set().scale(0.5);
                    canvasSec.add(Img2).renderAll();
                    canvasSec.setActiveObject(Img2);
                });
            };
            reader.readAsDataURL(file);
        });

        // Text
        $('#fill').change(function() {
            var...