bezier curve js code example

Example 1: javascript canvas beziercurveto

let start = {x: 100, y: 100};
let controlPoint1 = {x: 100, y: 200};
let controlPoint2 = {x: 200, y: 200};
let endPoint = {x: 200, y: 100};

ctx.moveTo(start.x, start.y); //Move to start point
ctx.bezierCurveTo(
  controlPoint1.x, controlPoint1.y,
  controlPoint2.x, controlPoint2.y,
  endPoint.x, endPoint.y
); //Draw curve
ctx.stroke(); //Draw outline

Example 2: mathematically create bezier curve javascript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 60, 10, 10);