JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="1280" height="800"></canvas>

JavaScript

var params = [
	{
		title : 'test',
		status : 0,
		size : 1200,
		coords : [
				[10,10],
				[40,10],
				[40,40],
				[10,40]
			]
	},
	{
		title : 'test2',
		status : 1,
		size : 1300,
		coords : [
				[60,10],
				[100,10],
				[100,60],
				[60,60]
			]
	},
	{
		title : 'test3',
		status : 2,
		size : 1400,
		coords : [
				[50,120],
				[100,110],
				[100,70],
				[60,70]
			]
	},
	
	
	{
		title : 'test',
		status : 0,
		size : 1200,
		coords : [
				[309,121],
				[352,139],
				[337,173],
				[295,153]
			]
	},
	
];

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'http://i.imgur.com/Lhi1zg6.jpg';
img.onload = function() {
	context.drawImage(img, 0, 0);
	
	context.beginPath();
	for(var i=0,j=params.length; i<j; i++)
	{
		for(var k=0,c=params[i].coords,l=c.length; k<l; k++)
		{
			if(k == 0)
				context.moveTo( c[0][0], c[0][1] );
			else
				context.lineTo( c[k][0], c[k][1] );
				
			if(k+1 == l)
				context.lineTo( c[0][0], c[0][1] );
			
		}
	}
	context.strokeStyle = '#f00';
	context.stroke();
	context.closePath();
};

function getCursorPosition(e)
{
	var x, y, z, d = document;
	if(e.pageX != z && e.pageY != z)
	{
		x = e.pageX;
		y = e.pageY;
	}
	else
	{
		x = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
		y = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
	}
	x -= canvas.offsetLeft;
	y -= canvas.offsetTop;
	return{x:x, y:y}
}

function isIntersect (a1, a2, b1, b2) {
  var area = function (a, b, c) {
	return (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
  }
  
  var intersect = function (a, b, c, d) {
    if (a>b) b = [a, a = b][0];
    if (c>d) d = [c, c = d][0];
    return Math.max (a, c) <= Math.min(b,d);
  }

  return intersect (a1.x, a2.x, b1.x, b2.x)
	  && intersect (a1.y, a2.y, b1.y, b2.y)
	  && area(a1,a2,b1) * area(a1,a2,b2) <= 0
	  && area(b1,b2,a1) * area(b1,b2,a2) <= 0;
}

function point (x, y) {
    this.x = x;
    this.y =...