Кривая безье через массив точек

Кривая безье через массив точек

by twobomb three

HTML

<canvas id="myCanvas"></canvas>

CSS

body,html{
  height:100%;
}

JavaScript

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");
var ctxW,ctxH;
canvas.width = ctxW = document.body.offsetWidth;
canvas.height = ctxH =document.body.offsetHeight;

var dots = [];

canvas.addEventListener("mousedown",function(e){
	dots.push([e.offsetX,e.offsetY]);
   draw();
});

function draw(){
	ctx.clearRect(0,0,ctxW,ctxH);  
	ctx.fillText("Кликай по канвасу",10,10)
  for(var i  = 0; i < dots.length;i++){
  	ctx.fillStyle = "red";
  	ctx.beginPath();
    ctx.arc(dots[i][0],dots[i][1],5,0,Math.PI*2);
    ctx.closePath();
    ctx.fill();
  }
	if(dots.length  >= 2){
  	 for(var i  = 0; i < dots.length - 1;i++){
     		var inxLast = i > 0?i-1:0;//Индекс предыдущей точки в массиве точек
        var inxNext = i < dots.length - 2? i+2 :i+1;   //Индекс следующей точки в массиве точек
        //Вычисляем промежуточные точки между двумя, по методу Maxim Shemanarev Interpolation with Bezier Curves
        //Подробнее http://agg.sourceforge.net/antigrain.com/research/bezier_interpolation/index.html
  	    var control = calcControlPoints(dots[inxLast][0],dots[inxLast][1],
                          dots[i][0],dots[i][1],
                          dots[i+1][0],dots[i+1][1],
                          dots[inxNext][0],dots[inxNext][1]);
                          
        ctx.moveTo(dots[i][0],dots[i][1]);
        ctx.bezierCurveTo(control.cx1,control.cy1,
        									control.cx2,control.cy2,        
                          dots[i+1][0],dots[i+1][1]);
       ctx.stroke();                       
  	} 
  }
}

draw();
function calcControlPoints(x0,y0,x1,y1,x2,y2,x3,y3){
    var xc1 = (x0 + x1) / 2.0;
    var yc1 = (y0 + y1) / 2.0;
    var xc2 = (x1 + x2) / 2.0;
    var yc2 = (y1 + y2) / 2.0;
    var xc3 = (x2 + x3) / 2.0;
    var yc3 = (y2 + y3) / 2.0;

    var len1 = Math.sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    var len2 = Math.sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    var len3 = Math.sqrt((x3-x2) * (x3-x2) + (y3-y2) *...