JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas' width=200 height=200 />

JavaScript

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  ctx.fillStyle = "red";
 
  ctx.beginPath();
  var start = [20, 100];
  var end = [120, 100];
  var above = Math.random()*80+20;
  // find the mid point between the ends, and subtract distance above
  //   from y value (y increases downwards);
  var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];    
  ctx.moveTo(start[0], start[1]);
 
  ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]); 
  ctx.stroke();
}

draw();