how to draw smooth curve using native Javascript code without ctx.bezierCurveTo?

Question

I need to draw and get coordinates of bezier curves of each steps with native Javascript without ctx.bezierCurveTo method.

I tried below method but it was not worked properly.Here I attached my code and output curve.

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};
          
  }

Does this answer your question? [how to draw smooth curve through N points using javascript HTML5 canvas?](https://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas) — Anurag Srivastava, Jul 05 '20 at 17:21
@blex I want use this for brush tool which are using texture as brush — Randima Lahiru, Jul 05 '20 at 18:22

score 3 · Answer 1 · answered Jul 08 '20 at 11:52

I found some way resolve this and it gave expected output for me.I tested it with 1 control point bezier curve algorithm.Here my sample code.

function draw(event) {
    if (!isDrawing) { return; }
    points.push({ x: event.clientX, y: event.clientY });
    let count = 0; pointArray = [];
    if (points.length > 1) {
      let begin; let control;
      const end = midPointBtw(points[points.length - 2] , points[points.length - 1] );
      if (points.length === 2) {
        begin = points[0];
        const middle  = midPointBtw(points[0] , points[1]);
        control =  midPointBtw(middle , points[1]);
      }  else {
        begin = midPointBtw(points[points.length - 3] , points[points.length - 2]);
        control =  points[points.length - 2];
      }
      for (let i = 0; i < 1; i += accuracy) {
        const p = bezier3(i,  begin , control, end);
        pointArray.push(p);
        count++;
      }
      if (count === 100) {
        ctx.beginPath();
        ctx.moveTo(begin.x, begin.y);
        for (let i = 0; i < pointArray.length - 1; i += 1) {
          ctx.lineTo(pointArray[i].x, pointArray[i].y);
        }
        ctx.stroke();
        ctx.closePath();
      }

    }
 }

function midPointBtw(p1, p2) {
    return {
      x: p1.x + (p2.x - p1.x) / 2,
      y: p1.y + (p2.y - p1.y) / 2
    };
  }
function bezier3(t, begin, control, end) {

    const cX = (end.x);
    const bX = 2 * (control.x);
    const aX = begin.x ;

    const cY = (end.y);
    const bY = 2 * (control.y) ;
    const aY = begin.y;

    const x = (aX * Math.pow((1 - t), 2)) + (bX * (1 - t) * t) + (cX * Math.pow(t, 2)) ;
    const y = (aY * Math.pow((1 - t), 2)) + (bY * (1 - t) * t) + (cY * Math.pow(t, 2));
    return {x: x, y: y};
  }

how to draw smooth curve using native Javascript code without ctx.bezierCurveTo?

1 Answers1