JSFiddle - React, Tailwind, and code Playground

by niphor

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.js"></script>
<script src="http://ec2-23-20-37-199.compute-1.amazonaws.com/RoadAnalyzerHTML5/js/sketch.js"></script>
 <div id="wrapper"><div class="tools">
  
</div>
    <div id="kineticJS"></div>
     <div id="sketchDiv"><canvas id="sketchCanvas"width="578px" height="200px"</canvas></div>
    </div>

CSS

.tools {
        position:relative;
        clear:left;
        }
        #wrapper {
        position:relative;
        width:100%;
        height:400px;
        background-color:lightblue;
        }
        #sketchCanvas {
        border:2px solid black;
        position:absolute;
    left:0px;
    top:40px;
        display:none;

        }
         #kineticJS {
        position:absolute;
        background-color:white;
       left:0px;
       top:40px;
        }

JavaScript

var sketchdataURL;
        var kineticdataURL;
        var stage;
        var redlineLayer,drawLayer,paint,line,tempshape,makeRect,rectCount=0,followRect;
        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var shape = new Array();
        var shapes = new Array();
        var rects = new Array();

        window.onload = function () {
            $('.tools').append('<button id="makeSketch">Make Sketch</button><button id="copySketch">Copy Sketch to Kinetic</button><button id="makeRect">Make Rectangle</button><button id="getKinetic">Get Kinetic Image</button><button id="hideRedlines">Hide Redlines</button>');
                stage = new Kinetic.Stage({
                container: 'kineticJS',
                width: 578,
                height: 200
            });

            var layer = new Kinetic.Layer();
            drawLayer = new Kinetic.Layer();
            redlineLayer = new Kinetic.Layer();
            var redlinelayerBG = new Kinetic.Rect({
                width: 578,
                height: 200,
                x: 0,
                y:0
            });
            drawLayer.add(redlinelayerBG);
            
           

            var rect = new Kinetic.Rect({
                x: 239,
                y: 75,
                width: 100,
                height: 50,
                fill: 'green',
                stroke: 'black',
                strokeWidth: 2,
                draggable:true
            });

            // add the shape to the layer
            layer.add(rect);
           drawLayer.setVisible(false);
            // add the layer to the stage
            stage.add(layer);
            stage.add(drawLayer);
            stage.add(redlineLayer);

            $('#makeSketch').click(function (event) {
                redlineLayer.setVisible(true);
                makeSketch();
            });
            $('#makeRect').click(function (e) {
               
                 followRect = new...