JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

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

JavaScript

bezier = function(t, p0, p1, p2, p3){
      var cX = 3 * (p1.x - p0.x),
          bX = 3 * (p2.x - p1.x) - cX,
          aX = p3.x - p0.x - cX - bX;
            
      var cY = 3 * (p1.y - p0.y),
          bY = 3 * (p2.y - p1.y) - cY,
          aY = p3.y - p0.y - cY - bY;
            
      var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
      var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;
            
      return {x: x, y: y};
    }
    
    
    function cubicBezier (p1x,p1y,p2x,p2y) {   	
    		const bezier = function(t, p0, p1, p2, p3){
      	var cX = 3 * (p1.x - p0.x),
          	bX = 3 * (p2.x - p1.x) - cX,
          	aX = p3.x - p0.x - cX - bX;
            
      	var	cY = 3 * (p1.y - p0.y),
         	 	bY = 3 * (p2.y - p1.y) - cY,
          	aY = p3.y - p0.y - cY - bY;
            
      	var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
      	var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;
            
      	return {x: x, y: y};
    	}     
      
      let _p0 = {x:0, y:0};
      let _p1 = {x: p1x, y: p1y};
      let _p2 = {x: p2x, y: p2y};
    	let _p3 = {x:1, y:1};      
      	
      this.get = (_t) => {
      	let returnBezier = bezier(_t, _p0, _p1, _p2, _p3)
      	return returnBezier.y
      }
    		
    }
    
    
    let teste = new cubicBezier(0.8,0.5,0.8,0.4);
    console.log(teste.get(0.8)) // <= 0.7136000000000001