JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="output">
</div>
</body>

CSS

*{
  margin:0px;
  padding:0px;
}
canvas{
  background-color:#eeeeee;
  border:1px solid black;
  margin:0;
  padding:0;
}

JavaScript

function getCanvas(w,h){
  var container = document.createElement('p');
  var canvas= document.createElement('canvas');
  container.appendChild(canvas);
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.transform(1,0,0,-1,0,h);
  document.getElementById('output').appendChild(container);
  return {
    w:w,
    h:h,
    ctx:ctx,
    container:container
  }
}
function Rectangle(w,h,canvas,ctx,offset, arcRadius){
  this.boxSize = {w:w,h:h}
  this.offset = offset;
  this.canvas = canvas;
  this.ctx = ctx;
  this.movablePoint = {x:this.offset.w,y:this.offset.h};
  this.movablePointSelected = false;
  this.arcRadius = arcRadius;
  this.tasksId = [];
  var w = this.boxSize.w;
  var h = this.boxSize.h;
  this.A = {x:offset.w,y:offset.h}
  this.B = {x:w-offset.w, y:offset.h}
  this.C = {x:w-offset.w, y:h-offset.h}
  this.D = {x:offset.w, y:h-offset.h}
  this.sides=[[this.A,this.B],[this.B,this.C],[this.C,this.D],[this.D,this.A]];
}
Rectangle.prototype.requestFrame=function(func){
  if(this.tasksId.length){
    this.tasksId.forEach(function(frameId){
      window.cancelAnimationFrame(frameId);
    });
  }
  window.requestAnimationFrame(func);
}
Rectangle.prototype.plotPoint=function(point){
  var oldStyle = this.ctx.fillStyle;
  this.ctx.arc(point.x, point.y,this.arcRadius,0,2*Math.PI);
  this.ctx.fillStyle = 'orange';
  this.ctx.fill();
  this.ctx.fillStyle = oldStyle;
  this.ctx.stroke();
}
Rectangle.prototype.plot=function(){
  var offset = this.offset;
  var ctx = this.ctx;
  ctx.beginPath();
  ctx.moveTo(this.A.x,this.A.y);
  ctx.lineTo(this.B.x, this.B.y);
  ctx.lineTo(this.C.x, this.C.y);
  ctx.lineTo(this.D.x, this.D.y);
  ctx.lineTo(this.A.x, this.A.y);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  this.plotPoint(this.movablePoint);
  ctx.closePath();
}
Rectangle.prototype.isMovablePointClick=function(clickPos){
  var r=this.d(clickPos,this.movablePoint);
  return  r <...