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(){
      var accuracy = 1/100  , //this'll give the bezier 100 segments
          p0 = {x: 10, y: 10}, //use whatever points you want obviously
          p1 = {x: 50, y: 120},
          p2 = {x: -20, y: 20},
          p3 = {x: 400, y: 400},
          ctx = document.getElementById('canvas').getContext('2d');         
				
      ctx.width = 500;
      ctx.height = 500;
      document.body.appendChild(ctx.canvas);
      
      ctx.moveTo(p0.x, p0.y);
      for (var i=0; i<1; i+=accuracy){
         var p = bezier(i, p0, p1, p2, p3);
         console.log(p);
         ctx.lineTo(p.x, p.y);
      }
  
      ctx.stroke()
    })()
    
    
    function cubicBezier (p1x,p1y,p2x,p2y) {
    	
      let p0 = {x:0, y:0};
      
    	let p3 = {x:1, y:1};
    	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};
    	}   		
    		
    }