JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const points = [
	[240, 240],
  [260, 240],
  [260, 270],
  [240, 260]
];

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

canvas.width = 500;
canvas.height = 500;

for (const point of points) {
	ctx.beginPath();
  ctx.arc(point[0], point[1], 5, 0, 2 * Math.PI);
  ctx.fill();
}

function bezier(points, t) {
	let newPoints = [];
  for (let i = 0; i < points.length - 1; i++) {
  	newPoints.push([
    	points[i][0] + t * (points[i+1][0] - points[i][0]),
      points[i][1] + t * (points[i+1][1] - points[i][1]),
    ]);
  }
  
  if (newPoints.length === 1) {
    return newPoints[0];
  }
  
  return bezier(newPoints, t);
}

function drawBezierCurve(tMin, tMax) {
	ctx.beginPath();
  ctx.moveTo(...bezier(points, tMin));
  for (let t = tMin; t <= tMax; t += 0.01) {
    ctx.lineTo(...bezier(points, t));
  }
  ctx.stroke();
}

drawBezierCurve(-2, 3);