JSFiddle - React, Tailwind, and code Playground

by Klaus Karkia

HTML

<div id="div">&nbsp;</div>
<canvas id="canvas" width="200" height="100"></canvas>

CSS

#div {
position: absolute;
width: 200px;
height: 100px;
border: 2px solid red;
top: 50px;
left: 50px;
background-color: yellow;
    

border-top-left-radius: 75px 25px;
border-top-right-radius: 75px 25px;
border-bottom-left-radius: 75px 25px;
border-bottom-right-radius: 75px 25px;
box-sizing: border-box;

}

#canvas {
position: absolute;
width: 200px;
height: 100px;
top: 50px;
left: 50px;
border: 1px solid rgba(0,0,0,.5);
    z-index: 2;
box-sizing: border-box;

}

JavaScript

var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
};

function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }

function getBezier(percent,C1,C2,C3,C4) {
  var pos = new coord();
  pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
  pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
  return pos;
}

var m = 0.5522847498;

var width = 200;
var height = 100;

var rsmall = 25;
var rlarge = 75;

var startX = 100;
var startY = 50;


var startPoint = {
    x: startX,
    y: startY - (height / 2)
};

var connectionPoint = {};

connectionPoint[1] = {
    x: startX + (width / 2),
    y: startY
};

connectionPoint[2] = {
    x: startX,
    y: startY + (height / 2)
};

connectionPoint[3] = {
    x: startX - (width / 2),
    y: startY
};

connectionPoint[4] = {
    x: startPoint.x,
    y: startPoint.y
};

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var lx = startPoint.x + rlarge * Math.cos(Math.PI * .25);
var ly = 0 + rlarge * Math.sin(Math.PI * .25);
var sx = startX + rsmall * Math.cos(Math.PI * .25);
var sy = startY + rsmall * Math.sin(Math.PI * .25);

console.log(lx);
console.log(ly);

ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(width, rsmall);
ctx.lineTo(width - rlarge, rsmall);
ctx.lineTo(width - rlarge, 0);
ctx.stroke();

// P_0 = (0,1), P_1 = (c,1), P_2 = (1,c), P_3 = (1,0)
// P_0 = (1,0), P_1 = (1,-c), P_2 = (c,-1), P_3 = (0,-1)
// P_0 = (0,-1), P_1 = (-c,-1), P_3 = (-1,-c), P_4 = (-1,0)
// P_0 = (-1,0), P_1 = (-1,c), P_2 = (-c,1), P_3 = (0,1)

ctx.strokeStyle = 'rgba(0,255,255,1)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(width - rlarge, 0);
ctx.bezierCurveTo(
    (width - rlarge) + (rlarge * m),
    0,
    width,
    rsmall - (rsmall * m),
    width,
    rsmall
);

ctx.stroke();

ctx.strokeStyle =...