JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<link rel="stylesheet" href="http://jsfiddle.net/css/normalize.css">
<div class="rec">lkjsdflkjsdflskdfjsldkfj</div>
<canvas id="canvas"></canvas>
lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj lkjsdflkj...

CSS

body {position: relative;}
canvas {
    background-color: teal;
    position: absolute;
    top: 0;
    left:0;
    width: 600px;
    height: 600px;
    z-index: 1;
}
.rec {
    z-index: 2;
    position: absolute;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    border: none 2px red;
}

JavaScript

var boxCoords = [];
$("document").ready(function(){
    $("canvas").on("click", function(pos){
        
        if(boxCoords.push([pos.clientX,pos.clientY])<3){
            $(".rec").css({"left": boxCoords[0][0], "right": boxCoords[0][1], "border-style": "solid"}).html(boxCoords.length);
            
            $(this).on("mousemove", function(drop){
                $(".rec").css({"width": drop.clientX, "height": drop.clientY, "border-style": "dashed"});
            });
            
            
            /*
            if(boxCoords.length==2){
                console.log(boxCoords[0]);
                console.log(boxCoords[0][0]);
                console.log(boxCoords[0][1]);
            }*/
        } else {
            boxCoords = [];
        }
    });
});

var timeoutID = document.setTimeout(console.log(boxCoords.length), 500);