JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc "></canvas>

CSS

#crosshair-h{
   // width:175px;
    height:2px;
    margin-top:-1px;
}
#crosshair-v{
   // height:175px;
    width:2px;
    margin-left:-1px;
}

#crosshair-hd{
  //  width:175px;
    height:2px;
    margin-top:-1px;
    position:fixed;
    background-color:rgba(255,0,0,0.5);
}
#crosshair-vd{
   // height:175px;
    width:2px;
    margin-left:-1px;
    position:fixed;
    background-color:rgba(255,0,0,0.5);
}
.hair{    
    position:fixed;
    background-color:rgba(255,0,0,0.5);
  //  box-shadow:0 0 5px rgb(100,100,100);
}


#c{
  width:350px;
  height:350px;
  background:grey;
}
#rectangle{
    width:2px;
    height:2px;
   // border:4px solid white;
    margin-top:-1px;
    margin-left:-1px;
    background:rgba(255,0,0,0.5);
}

#rectangleHint{
    width:120px;
    height:50px;
   // border:4px solid white;
    margin-top: 10px;
    margin-left: 10px;
    background:rgba(255,255,0,0.5);
}

JavaScript

var canvasF = new fabric.Canvas('c');

var text = new fabric.Text('Hello World', {
top:20,
left:15,
fontSize:50,
backgroundColor: '#ffffcc',
borderColor:'#000',
fontFamily:"helvetica"});
canvasF.add(text);   			

var htmlStr = '<div id="context" width="500px" height="500px"><div id="crosshair-h" class="hair"></div><div id="crosshair-v" class="hair"></div><div id="rectangle" class="hair"> <div id="crosshair-hd" class=""></div> <div id="crosshair-vd" class=""></div></div><div id="rectangleHint" class="hair"></div></div>';
$('.canvas-container').append(htmlStr);
var isOver = false;


$('#crosshair-h,#crosshair-v,#crosshair-hd,#crosshair-vd,#rectangle,#rectangleHint,#context').hide();
var cH = $('#crosshair-h'),
    cV = $('#crosshair-v'),
    cHD = $('#crosshair-hd'),
    cVD = $('#crosshair-vd'),
    rect = $('#rectangle'),
    rectHint = $('#rectangleHint'),
    context = $('#context'),
    canvas = $('#c');
    

$( document ).ready(function() {
    rectHint.hide();
});

$(document).on('mousemove',function(e){

	if (!isOver) return;
    cH.css('top',e.pageY);    
    cV.css('left',e.pageX);
    cH.css('width',e.pageX - 5);
    cV.css('height',e.pageY - 5);
    cHD.css('top',e.pageY);
    cVD.css('left',e.pageX);
   cHD.css('width',canvas.width() - e.pageX - 3);
   cVD.css('height',canvas.height() - e.pageY - 3);
   cVD.css('margin-top','6px');
   cHD.css('margin-left','6px');
    rect.css('top',e.pageY);
    rect.css('left',e.pageX);
    rectHint.css('top',e.pageY);
    rectHint.css('left',e.pageX);
    rectHint.html("X = " + e.pageX + " " + "Y = " + e.pageY);
});

canvasF.on('mouse:over', function(e) {

 if (e.target == null) return;
  canvasF.hoverCursor = 'none';
  rectHint.hide();
   isOver = true;
   $('#crosshair-h,#crosshair-v,#crosshair-hd,#crosshair-vd,#rectangle,#rectangleHint,#context').show();
   context.css('cursor','none');
});

canvasF.on('mouse:out', function(e) {
if (e.target == null) return;
  isOver = false;
  rectHint.show();
 ...