html5 canvas bezier curve get all the points

Question

I like to get some points from bezier curve.I found

Find all the points of a cubic bezier curve in javascript

Position is easy. First, compute the blending

Answer 1

How to find the pixels along a Bezier Curve

This set of functions will find an [x,y] point at interval T along cubic Bezier curve where 0<=T<=1.

In simple terms: It plots points along a cubic Bezier curve from start to end.

// Given the 4 control points on a Bezier curve 
// get x,y at interval T along the curve (0<=T<=1)
// The curve starts when T==0 and ends when T==1
function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {
    var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
    var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
    return ({
        x: x,
        y: y
    });
}

// cubic helper formula
function CubicN(T, a, b, c, d) {
    var t2 = T * T;
    var t3 = t2 * T;
    return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
}

You can fetch the points along the curve by sending the plotting function a large number of T values between 0.00 & 1.00.

Example code and a demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var cBez1=[{x:250,y: 120},{x:290,y:-40},{x:300,y:200},{x:400,y:150}]

drawBez(cBez1);

var cPoints=findCBezPoints(cBez1);

drawPlots(cPoints);


function findCBezPoints(b){
  var startPt=b[0];
  var controlPt1=b[1];
  var controlPt2=b[2];
  var endPt=b[3];
  var pts=[b[0]];
  var lastPt=b[0];
  var tests=5000;
  for(var t=0;t<=tests;t++){
    // calc another point along the curve
    var pt=getCubicBezierXYatT(b[0],b[1],b[2],b[3], t/tests);
    // add the pt if it's not already in the pts[] array
    var dx=pt.x-lastPt.x;
    var dy=pt.y-lastPt.y;
    var d=Math.sqrt(dx*dx+dy*dy);
    var dInt=parseInt(d);
    if(dInt>0 || t==tests){
      lastPt=pt;
      pts.push(pt);
    }
  }
  return(pts);
}

// Given the 4 control points on a Bezier curve 
// Get x,y at interval T along the curve (0<=T<=1)
// The curve starts when T==0 and ends when T==1
function getCubicBezierXYatT(startPt, controlPt1, controlPt2, endPt, T) {
  var x = CubicN(T, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
  var y = CubicN(T, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
  return ({
    x: x,
    y: y
  });
}

// cubic helper formula
function CubicN(T, a, b, c, d) {
  var t2 = T * T;
  var t3 = t2 * T;
  return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
}

function drawPlots(pts){
  ctx.fillStyle='red';
  // don't draw the last dot b/ its radius will display past the curve
  for(var i=0;i

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

Black line is context.bezierCurveTo
Red "line" is really dot-points plotted along the curve