JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <script src="https://pomax.github.io/bezierjs/bezier.js"></script>
  <h3>Half Baked Bezier Curve LED Configurator</h3>
  <canvas id="c" height=400 width=400></canvas>

</html>

CSS

button {
  height: 50px;
  width: 100px;
}

JavaScript 1.7

//some globals
var cvs = document.getElementById("c");
cvs.width = 1070;
cvs.height = 584;
var ctx = cvs.getContext("2d");
var curves = [];

//grab the fisheye image
var img = new Image();
img.src = 'https://image.jimcdn.com/app/cms/image/transf/dimension=1070x10000:format=png/path/s01854e9c3e083509/image/i5cf6fa8694d2d5e9/version/1499274452/image.png';


//main method
$(function() {
											///curve definition                        		//leds
  addCurve(new Bezier(877, 117, 939, 181, 971, 276, 963, 377), 			29); //r
  addCurve(new Bezier(283, 116, 375, 77, 688, 68, 858, 107), 				49); //t
  addCurve(new Bezier(272, 124, 221, 172, 179, 296, 208, 376), 			29); //l
  addCurve(new Bezier(213, 387, 331, 418, 719, 448, 953, 384), 			49); //b
  
  doUpdate();
});


function drawSkeleton(curve, offset, nocoords) {
  offset = offset || {
    x: 0,
    y: 0
  };
  var pts = curve.points;
  ctx.strokeStyle = "pink";
  drawLine(pts[0], pts[1], offset);
  if (pts.length === 3) {
    drawLine(pts[1], pts[2], offset);
  } else {
    drawLine(pts[2], pts[3], offset);
  }
  ctx.strokeStyle = "lightgreen";
  if (!nocoords) drawPoints(pts, offset);
}

function drawCircle(p, r, offset) {
	var ledBoxSize = 10;
  offset = offset || {
    x: 0,
    y: 0
  };
  var ox = offset.x;
  var oy = offset.y;
  ctx.beginPath();
  ctx.arc(p.x + ox, p.y + oy, r, 0, 2 * Math.PI); //circle
  ctx.stroke();
}

function drawLedBox(p, r, offset) {
	var ledBoxSize = 10;
  offset = offset || {
    x: ledBoxSize/2,
    y: ledBoxSize/2
  };
  var ox = offset.x;
  var oy = offset.y;
  ctx.beginPath();
  ctx.rect(p.x + ox, p.y + oy, ledBoxSize, ledBoxSize) //rect
  ctx.stroke();
}

function drawPoints(points, offset) {
  offset = offset || {
    x: 0,
    y: 0
  };
  points.forEach(function(p) {
    drawCircle(p, 3, offset);
  }.bind(this));
}

function drawLine(p1, p2, offset) {
  offset = offset || {
    x: 0,
    y: 0
  };
  var ox = offset.x;
  var oy = offset.y;
  ctx.beginPath();
  ctx.moveTo(p1.x +...