JSFiddle - React, Tailwind, and code Playground

by Sandeep Kumar Thakurala

HTML

<div id="container2">
    <canvas id="drawingCanvasLayer" width="800" height="600">
    	This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
</div>

JavaScript

var centerPoints, style, drag = null, dPoint, oldCenterPoints, centerPointsObjectArray=[], dragPoint = -1;
var isEmpty = true, isDrwingShape = false; isRectangleStretchEnabled = false, isShapeDrag = false, isStretchPointGrab = false,
	doesSideChanged = false;
var resizePoint = -1, offsetX, offsetY;

var canvas = document.getElementById('drawingCanvasLayer'),
    ctx = canvas.getContext('2d'),
    rect = {},
	oldRect = [],
    isDrag = false;

    function init() {
		
		//default styles
		style = {
			curve:	{ width: 1, color: "black" },
			cpline:	{ width: 1, color: "black" },
			point:  { radius: 5, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
		}
		
		canvas.addEventListener('mousedown', mouseDown, false);
		canvas.addEventListener('mouseup', mouseUp, false);
		canvas.addEventListener('mousemove', mouseMove, false);
		canvas.addEventListener('dblclick', dblClick, false);
		
	}
	
	function Box2() {
	  this.x = 0;
	  this.y = 0;
	  this.w = 1; // default width and height?
	  this.h = 1;
	}
	
	function CenterPointLocations(){
		this.cp1x = 0;
		this.cp1y = 0;
		this.diffcp1x = 0;
		this.diffcp1y = 0;
		this.cp2x = 0;
		this.cp2y = 0;
		this.diffcp2x = 0;
		this.diffcp2y = 0;
		this.cp3x = 0;
		this.cp3y = 0;
		this.diffcp3x = 0;
		this.diffcp3y = 0;
		this.cp4x = 0;
		this.cp4y = 0;
		this.diffcp4x = 0;
		this.diffcp4y = 0;
	}

	function mouseDown(e) {
		rect.startX = e.pageX - this.offsetLeft;
		rect.startY = e.pageY - this.offsetTop;
		DragStart(e);
		//Drag rectangle from within the rectangle area
		if(!isStretchPointGrab && oldRect.length > 0 && (rect.startX >= oldRect[0].x && rect.startX < oldRect[0].x + oldRect[0].w) && (rect.startY >= oldRect[0].y && rect.startY < oldRect[0].y + oldRect[0].h)){
			e = MousePos(e);
			offsetX = e.x - oldRect[0].x;
			offsetY = e.y - oldRect[0].y;
			isShapeDrag = true;
			canvas.style.cursor = "move";
		}
		
		isDrag = true;
	}

	function mouseUp(e)...