javascript - ctx.bezierCurveTo なしでネイティブ Javascript コードを使用して滑らかな曲線を描く方法は?

Question

ctx.bezierCurveTo メソッドを使用せずに、ネイティブ Javascript を使用して各ステップのベジェ曲線の座標を描画して取得する必要があります。

以下の方法を試しましたが、正しく動作しませんでした。ここにコードと出力曲線を添付しました。

const accuracy = 0.01; let temp = 4;

 function draw(event) {
      if (!isDrawing) { return; }
      points.push({ x: event.clientX, y: event.clientY });    
      let count = 0;
      if(points.length === temp) {
      ctx.beginPath();
      ctx.moveTo(points[points.length - 4].x, points[points.length - 4].y)
      for (let i = 0; i <= 1; i += accuracy) {
        const p = bezier2(i, points[points.length - 4], points[points.length - 3] , 
        points[points.length - 2], points[points.length-1]);
        ctx.lineTo(p.x,p.y)
      }
     temp += 3
     ctx.stroke();
     ctx.closePath();
    }
  }

function bezier2(t, p0, p1, p2, p3){

    const aX = p0.x ;
    const bX = 3.0 * p1.x;
    const cX = 3.0 * p2.x;
    const dX = p3.x ;

    const aY = p0.y;
    const bY = 3.0 * p1.y ;    
    const cY = 3.0 * p2.y;    
    const dY = p3.y;

    const x = (p0.x * Math.pow((1 - t), 3)) + (3.0 * p1.x * Math.pow((1 - t), 2) * t) + (3.0 * p2.x * Math.pow((t), 2) * (1 - t)) + (p3.x * Math.pow(t, 3));
    const y = (p0.y * Math.pow((1 - t), 3)) + (3.0 * p1.y * Math.pow((1 - t), 2) * t) + (3.0 * p2.y * Math.pow((t), 2) * (1 - t)) + (p3.y * Math.pow(t, 3));
    return {x: x, y: y};
          
  }