JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=600 height=600></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, -3700, -50)
const gap = 32;
const line = [
	{x: 3830, y: 95}, 
  {x: 3830 + gap, y: 95}, 
  {x: 12600 - gap, y: 25895}, 
  {x: 12600, y: 25895}
];

// Draw bezier out of box
function drawLine(p1, a1, a2, p2, width, color) {
	ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.bezierCurveTo(a1.x, a1.y, a2.x, a2.y, p2.x, p2.y);
  ctx.stroke();
}

drawLine.apply(null, line.concat([3, '#f00']));
drawLine.apply(null, line.concat([1, '#00f']));