This image consists of eight curves, and I obtained their control points and angles

by calculating：

var PI2=Math.PI*2;
var s={x:dis[i][0],y:dis[i][1]};
var c1={x:dis[i][2],y:dis[i][3]};
var c2={x:dis[i][4],y:dis[i][5]};
var e={x:dis[i][6],y:dis[i][7]};
// an array of points plotted along the bezier curve


// we use PI often so put it in a variable
var PI=Math.PI;

// plot 400 points along the curve
// and also calculate the angle of the curve at that point
// NOTE: You may need to adjust the point count (==100 here)
//      if the curve is much shorter or longer than this demo's curve
for(var t=0;t<=100;t+=0.25){

  var T=t/100;

  // plot a point on the curve
  var pos=getCubicBezierXYatT(s,c1,c2,e,T);

  // calculate the tangent angle of the curve at that point
  
  var tx = bezierTangent(s.x,c1.x,c2.x,e.x,T);
  var ty = bezierTangent(s.y,c1.y,c2.y,e.y,T);
  var a = Math.atan2(ty, tx)-PI/2;

  // save the x/y position of the point and the tangent angle
  // in the points array
  points.push({
    x:pos.x,
    y:pos.y,
    angle:a
  });
}
}

function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
  var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
  var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
  return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(T, a,b,c,d){
  var t2 = T * T;
  var t3 = t2 * T;
  return a + (-a * 3 + T * (3 * a - a * T)) * T
  + (3 * b + T * (-6 * b + b * 3 * T)) * T
  + (c * 3 - c * 3 * T) * t2
  + d * t3;
}

// calculate the tangent angle at interval T on the curve
function bezierTangent(a, b, c, d, t){
  return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b));
 
};

I used this method to add the image，But the image is only distorted with a curve：

for(var x=0;x<points.length;x++){
    var  p = points[x]
  ctx.translate(p.x,p.y)
    //(p.angle-PI/2))*Math.PI/180
    // ctx.rotate(p.angle - PI/2);
   
    ctx.rotate((p.angle -PI/2)*Math.PI/180)
    // draw multiple times to fill gaps on outside of rope slices
   
    ctx.drawImage(img,sliceCount,0,1,img.height,0,0,1,img.height)
    ctx.drawImage(img,sliceCount,0,1,img.height,0,0,1,img.height)
     ctx.drawImage(img,sliceCount,0,1,img.height,0,0,1,img.height)
    
    // ctx.drawImage(img,sliceCount,0,1,1,0,0,1,1);
    //  ctx.drawImage(img,200,200);
    ctx.setTransform(1,0,0,1,0,0); 


    ++sliceCount;
    // if(sliceCount>(img.width-1)){sliceCount=0;}
 }

When the angle changes, the picture is at the wrong angle, how should I distort the picture by the control points of the curve, thank you very much