Bezier curve.js

document.documentElement.style.height = 
document.documentElement.style.width = 
document.body.style.height = 
document.body.style.width = "100%"

canvas = document.createElement(`canvas`);
canvas.canvasRes = function  (){
  var {width, height} =  document.body.getBoundingClientRect();
  var d = document.body.getBoundingClientRect();
  canvas = this;
  debugger;
  canvas.width = width;
  canvas.height = height;
}; 

cursorElem = document.createElement(`span`);
ctx = canvas.getContext('2d');

window.onresize = 
window.onload = function(){
	canvas.canvasRes();
	debugger;
	[canvas, cursorElem].forEach((el) => document.body.appendChild(el))
}

coord = function (x = 0,y = 0) {
  this.x = x;
  this.y = y;
  
  this.mag    = function(){
    return Math.hypot(this.x, this.y)
  }
  this.isNear = function(p, r = 5) {
    return Math.hypot(p.x - this.x, p.y - this.y) < r;
  }
}

mouse = new coord();

canvas.onmousemove = function(e){
	const {top, left} = canvas.getBoundingClientRect();
	var x = e.clientX - left;;
	var y = e.clientY - top;
		mouse.x = x;
		mouse.y = y;

		cursorElem.style.left = x + 25 + `px`;
		cursorElem.style.top  = y + 15 + `px`;
		cursorElem.textContent = `${x} : ${y}`
		ctx.clearRect(0, 0, canvas.width, canvas.height);

}

canvas.addEventListener('mousedown', e => {mouse.left = true; })
canvas.addEventListener('mouseup'  , e => {mouse.left = false; mouse.captured = void 0; })
  
    B0 = function(t) { return 1 - t };
	B1 = function(t) { return Math.pow(t, 3); }
	B2 = function(t) { return (3*t*t*B0(t)); } 
	B3 = function(t) { return (3*t*B0(t)*(1-t)); }
	B4 = function(t) { return (Math.pow(B0(t), 3)); }

	function getBezier(percent,C1,C2,C3,C4) {
		var pos = new coord();
		pos.x = C1.x * B1(percent) + C2.x * B2(percent) +C3.x * B3(percent) + C4.x * B4(percent);
		pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent) + C4.y * B4(percent);
		return pos;
	}
	
	//Control Points
    var hw = canvas.width / 2, hh = canvas.height / 2;
	PR = 5 // Point radius
	P1 = new coord(150,350);
	P2 = new coord(150, 150)
	P3 = new coord(450,150);
	P4 = new coord(450,350);


	//Control points to find non-linear point on other curve
	Q1 = new coord(0,0);
	Q2 = new coord(0.2,0.8);
	Q3 = new coord(0.8,0.2);
	Q4 = new coord(1,1);

    points = [P1, P2, P3, P4].map(function (p) {
      return p
    });

	stage=0.5;
	dir=0;
Pi2 = Math.PI * 2;
    var t = 0;
    var t0 = 0;
	function loop (dt = 0) {
        t0 += dt / 100000;
        t   = t0 % 1
        if(t > 1) { t = 0 }
		ctx.fillStyle = `#000000`;
		ctx.clearRect(0,0, canvas.width, canvas.height);
		ctx.fillRect(0,0, canvas.width, canvas.height);
		if (mouse.captured) {
			var p = mouse.captured;
			p.x = mouse.x;
			p.y = mouse.y;
			ctx.save();
			ctx.beginPath();
			ctx.moveTo(p.x,p.y)
			ctx.arc(p.x,p.y, 7, 0, Pi2)
			ctx.fillStyle = 'red';
			ctx.fill();
			ctx.closePath();
			ctx.restore();
		}

      
		
		ctx.fillStyle = `white`;
		ctx.strokeStyle = `white`;
		ctx.strokeWidth = `1px`;


      ctx.beginPath();
      ctx.moveTo(P1.x, P1.y);
      ctx.lineTo(P2.x, P2.y);
      ctx.stroke();
      ctx.closePath()
      
      ctx.beginPath();
      ctx.moveTo(P4.x, P4.y);
      ctx.lineTo(P3.x, P3.y);
      ctx.stroke();
      ctx.closePath()
      for (let i = 0; i < points.length; i++){
        var p = points[i];
            // Check if mouse is nearby
			if (!mouse.captured && mouse.left && p.isNear(mouse, PR)) {
              mouse.captured = p;
            }

            ctx.beginPath();
            ctx.arc(p.x,p.y, 5, 0, Pi2)
            ctx.stroke();
            ctx.closePath()
      }

     
// 		var speed = getBezier(t,Q1,Q2,Q3,Q4);

		//find position on bezier curve

         ctx.beginPath();
         ctx.moveTo(P4.x, P4.y)
         let tn = 0;
         while (tn <= 1) {
           b = getBezier(tn,points[0],points[1],points[2],points[3]);
           tn += 0.01;
           ctx.lineTo(b.x, b.y)
           ctx.stroke();

         }
         ctx.closePath();
        requestAnimationFrame(loop)
	};
    
     loop()