bezier approximation

with random examples

by DenisKreshikhin

HTML

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

JavaScript

function drawByLines(ctx, points) {
  ctx.beginPath();
  ctx.setLineDash([1, 2]);
  ctx.moveTo(points[0].x, points[0].y);
  points.forEach(function(p) {
    ctx.lineTo(p.x, p.y)
  });
  ctx.stroke();
}

function drawByCurves(ctx, points) {
  ctx.beginPath();
  ctx.setLineDash([]);
  ctx.moveTo(points[0].x, points[0].y);
  var interpolated = [];
  for (var i = 1; i < points.length - 2; i++) {
    var xc = (points[i].x + points[i + 1].x) / 2;
    var yc = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
  }
  ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
  ctx.stroke();
}


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

var points = [];
for (i = 0; i < 600; i += 50) {
  points.push({
    x: i,
    y: Math.random() * 200
  });
};

drawByLines(ctx, points);
drawByCurves(ctx, points);