JSFiddle - React, Tailwind, and code Playground

by Shishir Raven

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<div id="container">
  <h1>Special Rectangle</h1>
  <p>Creating a Rectangle that can have Rounded Corners on Selective Sides</p>
	<canvas id="myCanvas" width="500" height="300"></canvas>
</div>

CSS

#myCanvas {
  border: 1px solid #DDD
}

JavaScript

var canvas = document.getElementById("myCanvas");

paper.install(window);
paper.setup(canvas);

var cornerSize = new Size(10, 10);


var specialRectangle = function(putOnPoint,boxSize,cornerSizeSpecific)
{

// Finding all the original Points. 
   var point1 = putOnPoint; 
   var point2 = point1.add(new Point(boxSize.width,0));
   var point3 = point2.add(new Point(0,boxSize.height))
   var point4 = point3.subtract(new Point(boxSize.width,0));;
   
   var recPath = new Path();
   recPath.closed = true;
    
   // Top Left Corner
   if(cornerSizeSpecific[0]!=null)
   {
   		var firstPoint 				= putOnPoint.add(new Point(0,cornerSizeSpecific[0].height)) 
   		var lastPoint = putOnPoint.add(new Point(cornerSizeSpecific[0].width,0))
			var firstSegment = new Segment(firstPoint, null,{x: 0, y: (cornerSizeSpecific[0].height*-1)/2} );
      var secondSegment = new Segment(lastPoint,  {x: (cornerSizeSpecific[0].width*-1)/2, y: 0},null);
      recPath.add(firstSegment, secondSegment);
			recPath.strokeColor = 'black';
   }
   else
 	 {
  		recPath.add(point1);
   }
   
   // Top Right
   if(cornerSizeSpecific[1]!=null)
   {
   		var firstPoint 				= point2.subtract(new Point(cornerSizeSpecific[0].width,0)) 
   		var firstSegment = new Segment(firstPoint, null,{y: 0, x: (cornerSizeSpecific[0].width*1)/2} );
      var lastPoint = point2.add(new Point(0,cornerSizeSpecific[0].height))
      var secondSegment = new Segment(lastPoint,  {y: (cornerSizeSpecific[0].height*-1)/2, x: 0},null);
      recPath.add(firstSegment, secondSegment);
			recPath.strokeColor = 'black';
   }
   else
 	 {
   		recPath.add(point2);
   }
   
   // Bottom Right
   if(cornerSizeSpecific[2]!=null)
   {
   		var firstPoint 				= point3.subtract(new Point(0,cornerSizeSpecific[0].height)) 
   		var firstSegment = new Segment(firstPoint, null,{x: 0, y: (cornerSizeSpecific[0].height*1)/2} );
      var lastPoint = point3.subtract(new Point(cornerSizeSpecific[0].width,0))
      var secondSegment = new...