Построение β-сплайна по клику

<canvas id="canvas" width="1500" height="800"></canvas><br/>
<input type="checkbox" id="Points">Points<br />
<input type="checkbox" id="Line">Line<br />
<input type="button" onclick="update()" value="Update">
<script type="text/javascript">
var coords = [];
var k=0;
var plot = function(x, y, c) { // ”становить пиксель в т. (x, y) с прозрачностью c 
    if(isFinite(x) && isFinite(y)){
        var color = {
            r: plot.color.r,
            g: plot.color.g,
            b: plot.color.b,
            a: plot.color.a*c
        };
 
        setPixel(x,y, color);
    }
};
 
function setPixel (x,y,c) { // функция установки пикселя в js
    c = c||1;
    var p=canva.createImageData(1,1);
    p.data[0]=c.r;
    p.data[1]=c.g;
    p.data[2]=c.b;
    p.data[3]=c.a;
    var data = canva.getImageData(x, y, 1,1).data;
    if(data[3] <= p.data[3])
    canva.putImageData(p,x,y);
}
 
function drawSpline(color) {
    var num = 0;
    for(var i=0; i<2*k; i+=2){
        if(i>0){
            var deltaX = coords[i/2+1].X - coords[i/2].X;
            var deltaY = coords[i/2+1].Y - coords[i/2].Y;
            num += Math.sqrt(deltaX*deltaX+deltaY*deltaY);
        }
    }
    coords[0] = coords[1];
    coords[coords.length] = coords[coords.length-1];
    plot.color = color;
    for (var i = 1; i <= coords.length-3; i++)// в цикле по всем четвёркам точек
    {
        var a = [], b = [];
        arrs = {a:a, b:b};
        _SplineCoefficient(i, arrs, coords);// считаем коэффициенты q   `
        var points = {};// создаём массив промежуточных точек
        for(var j=0;j<num;j++)
        {
           var t = j/num;// шаг интерполяции
            // передаём массиву точек значения по методу beta-spline
            points.X = (arrs.a[0] + t * (arrs.a[1] + t * (arrs.a[2] + t * arrs.a[3])));
            points.Y = (arrs.b[0] + t * (arrs.b[1] + t * (arrs.b[2] + t * arrs.b[3])));
            plot(points.X, points.Y,color.a/255);
        }
    }
}
function _SplineCoefficient(i, arrs, coords)// в функции рассчитываютс¤ коэффициенты a0-a3, b0-b3
{    
arrs.a[3] = (-coords[i - 1].X + 3*coords[i].X - 3*coords[i + 1].X + coords[i + 2].X)/6;   
arrs.a[2] = (coords[i - 1].X - 2*coords[i].X + coords[i + 1].X)/2;   
arrs.a[1] = (-coords[i - 1].X + coords[i + 1].X)/2;   
arrs.a[0] = (coords[i - 1].X + 4*coords[i].X + coords[i + 1].X)/6;  
arrs.b[3] = (-coords[i - 1].Y + 3*coords[i].Y - 3*coords[i + 1].Y + coords[i + 2].Y)/6;    
arrs.b[2] = (coords[i - 1].Y - 2*coords[i].Y + coords[i + 1].Y)/2;   
arrs.b[1] = (-coords[i - 1].Y + coords[i + 1].Y)/2; 
arrs.b[0] = (coords[i - 1].Y + 4*coords[i].Y + coords[i + 1].Y)/6;
}
var canva = document.getElementById("canvas").getContext('2d');
var mouseX,mouseY;
var Line,Points;
 
canvas.onclick = function(event) {
    canva.clearRect(0,0,1500,800);
	Line=document.getElementById('Line').checked;   //проверяем chekbox'ы
	Points=document.getElementById('Points').checked;
	mouseX = event.clientX;  	//запоминаем координаты мыши
	mouseY = event.clientY;
	k++;
	coords[k] = {X:mouseX, Y:mouseY};
	if (k>3){
	drawSpline( {r:255, g:0, b:0, a:255}, coords[k-3].X, coords[k-3].Y, coords[k-2].X, coords[k-2].Y, coords[k-1].X, coords[k-1].Y, coords[k].X, coords[k].Y);
	}
		if (Points==true){   //рисуем точки
		for (var i=0;i<coords.length-1;i++){   
			canva.beginPath();
			canva.arc(coords[i+1].X,coords[i+1].Y,2,0,2*Math.PI);
			canva.stroke();
			canva.fillStyle="green";
			canva.fill();
		}
	}
	if (Line==true){  //проводим ломанную
		canva.beginPath();
		canva.moveTo(coords[1].X,coords[1].Y);
		for (i=1;i<coords.length-1;i++)  canva.lineTo(coords[i+1].X,coords[i+1].Y);
		canva.stroke();
	}
}
 
function update(){
    canva.clearRect(0,0,1500,800);
	Line=document.getElementById('Line').checked;   //проверяем chekbox'ы
	Points=document.getElementById('Points').checked;
	coords.pop();
	if (k>3){
	drawSpline( {r:255, g:0, b:0, a:255}, coords[k-3].X, coords[k-3].Y, coords[k-2].X, coords[k-2].Y, coords[k-1].X, coords[k-1].Y, coords[k].X, coords[k].Y);
	}
	if (Points==true){   //рисуем точки
		for (var i=0;i<coords.length-1;i++){   
			canva.beginPath();
			canva.arc(coords[i+1].X,coords[i+1].Y,2,0,2*Math.PI);
			canva.stroke();
			canva.fillStyle="green";
			canva.fill();
		}
	}
	if (Line==true){  //проводим ломанную
		canva.beginPath();
		canva.moveTo(coords[1].X,coords[1].Y);
		for (i=1;i<coords.length-1;i++)  canva.lineTo(coords[i+1].X,coords[i+1].Y);
		canva.stroke();
	}
}
</script>