Bezier Curve

by moonou

HTML

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

JavaScript

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

let points = [
	[0, 200],
	[100, 100],
  [150, 200],
  [200, 300],
  [250, 250],
  [300, 400],
  [360, 100],
  [450, 200],
  [490, 310]
]

let scale = 1/4

ctx.beginPath()
for (let index = 0; index < points.length; index++) {
	ctx.fillRect(points[index][0], points[index][1], 10, 10);
  if (index === points.length - 1) break
	let pa = [],
  		pb = [],
      nextX = points[index + 1][0],
      nextY = points[index + 1][1]
  
  if (index === 0) {
    let next2X = points[index + 2][0],
        next2Y = points[index + 2][1],
        x = points[index][0],
        y = points[index][1]
    pa = [
    	x + (nextX - x) * scale,
      y + (nextY - y) * scale
    ]
    pb = [
    	nextX - (next2X - x) * scale,
      nextY - (next2Y - y) * scale
    ]
    ctx.moveTo(x,y)
  } else if (index === points.length - 2) {
  	let lastX = points[index - 1][0],
        lastY = points[index - 1][1],
        x = points[index][0],
        y = points[index][1]
    pa = [
      x + (nextX - lastX) * scale,
      y + (nextY - lastY) * scale
    ]
    pb = [
      nextX - (nextX - lastX) * scale,
      nextY - (nextY - lastY) * scale
    ]
  } else {
    let lastX = points[index - 1][0],
        lastY = points[index - 1][1],
        next2X = points[index + 2][0],
        next2Y = points[index + 2][1],
        x = points[index][0],
        y = points[index][1]
     
    pa = [
      x + (nextX - lastX) * scale,
      y + (nextY - lastY) * scale
    ]
    pb = [
      nextX - (next2X - x) * scale,
      nextY - (next2Y - y) * scale
    ]
  }
  
  ctx.bezierCurveTo(pa[0], pa[1], pb[0], pb[1], nextX, nextY)
}
ctx.stroke()