JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="500"></canvas>

CSS

body {
margin: 0px;
padding: 0px;
}

JavaScript

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

//var basex = 200;
//var basey = 200;
var path_size1 = 50;
var path_size2 = 100;
var path_size3 = 150;

ctx.beginPath();

//ctx.moveTo(basex, basey);
//ctx.bezierCurveTo(basex, basey-path_size1,basex+path_size1, basey-//path_size1,basex+path_size1, basey);
//ctx.stroke();

//ctx.moveTo(basex, basey);
//ctx.bezierCurveTo(basex, basey-path_size2,basex+path_size2, basey-//path_size2,basex+path_size2, basey);
//ctx.stroke();

//ctx.moveTo(basex, basey);
//ctx.bezierCurveTo(basex, basey-path_size3,basex+path_size3, basey-//path_size3,basex+path_size3, basey);
//ctx.stroke();

//var path_size4 = 150;
//var path_size4_x = 150;
//var path_size4_y = 150;
//var x_change = 150;
//path_size4_x += x_change;
//path_size4_y += x_change;
//ctx.moveTo(basex, basey);
//ctx.bezierCurveTo(basex, basey-path_size4_y,basex+path_size4_x, basey-//path_size4_y,basex+path_size4+x_change, basey);
//ctx.stroke();

//var path_size5 = 300;
//ctx.moveTo(basex, basey);
//ctx.bezierCurveTo(basex, basey-path_size5,basex+path_size5, basey-//path_size5,basex+path_size5, basey);
//ctx.stroke();

var path_size4 = 150;
var x_change = 50;
var y_change = 50;
var basex = 100;
var basey = 200;
var to_x = basex + path_size4 + x_change;
var to_y = basey + y_change;

path_size4 += x_change;

var c_x1 = basex;
var c_y1 = basey-path_size4;
var c_x2 = to_x;
var c_y2 = basey-path_size4;

ctx.moveTo(basex, basey);
ctx.bezierCurveTo(c_x1,c_y1,c_x2,c_y2,to_x, to_y);
ctx.stroke();