如何在canvas上使用drawimage来改变图片每一个像素的translate值和angle值？

我有下列蓝色线条里（贝塞尔曲线）每一个控制点的（x,y)和angle值（弧线），目前图片只能随着一条曲线而扭曲,

而当曲线角度变化太大时，就会发生以下情况：

我目前使用的drawimage方法是：

 var sliceCount=0;
     left = parseInt(left * 4)
     top = parseInt(top * 4)
  var calcleft =0
 var calctop = 0
  for(var x=left;x<points.length;x++){
    var  p = points[x]

//     //(p.angle-PI/2))*Math.PI/180
//     ctx.rotate(p.angle - PI/2);
    ctx.translate(p.x, p.y);
    ctx.rotate(p.angle*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.setTransform(1,0,0,1,0,0); 


    ++sliceCount;

我的问题是，如何让图片随着4边的控制点而扭曲呢，角度也要符合？