JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
    <canvas style="border: 2px solid; " height="300" width="300" id="c"></canvas>

JavaScript

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

var square = new fabric.Rect({
                    left: 200,
                    top: 100,
                    width: 20,
                    height: 20,
                });

var line = new fabric.Line([0,100,100,100], {
  stroke: 'red',
  strokeWidth: 1,
  angle: 45,
  left: 50
});
    
canvas.add(square);
canvas.add(line);
    
canvas.on('mouse:move', (e)=>{
	switch (e.target){
  	case line:
    {
    	console.log("Pointer over a line");
      canvas.backgroundColor="green";
    	break;
    }
    case square:
    {
    	console.log("Pointer over a square");
      canvas.backgroundColor="blue";
    	break;
    }
    default:
    {
    	canvas.backgroundColor="white";
    	break;
    }
  }
  
  canvas.renderAll();
});