Как изменить форму рисунка в пределах кривой Безье на холсте

Question

Я пытаюсь обернуть загруженное изображение вокруг этого рукава кофейной чашки.Я уже рассматривал подобные вопросы о переполнении стека, но потратил недели, пытаясь понять, где они вычисляют контрольные точки Безье и как изменять их по вертикали и горизонтали одновременно (я думаю, это все, чего мне не хватало, чтобы иметь возможность использовать this . Поэтому вместо этого я использовал метод bezierCurveTo (), чтобы указать в параметрах, куда я хочу поместить изображение, так как было легче понять, как сделать то и другое, и попытался сделать изображение шаблоном для его заполнения.Это то, что я получаю, когда я запускаю свой код локально: Как видите, в нижней части контура есть фрагмент фотографии, которую я хочу, но она должна охватывать всюКак сделать так, чтобы шаблон изображения заполнил всю обведенную желтым цветом область?

Вот мой код:

var cdEdit = document.getElementById("cdEdit");
var faceCanvas = document.getElementById("face");
var ctx = cdEdit.getContext("2d");
var faceCtx = face.getContext("2d");

var cup = new Image();
cup.crossOrigin = 'anonymous';
cup.onload = draw;
cup.src = 'https://image.ibb.co/d5psR9/sleeve_Clean.png';

var cupTop = 147;
var cupBottom = 399;
var dxx = 19;
var dyy = -29;
var l = {
  x0: 115,
  y0: cupTop,
  x1: 138,
  y1: cupBottom
};
var r = {
  x0: 384,
  y0: cupTop,
  x1: 361,
  y1: cupBottom
};
var t = {
  x0: l.x0,
  y0: l.y0,
  x1: l.x0 + dxx,
  y1: r.y0 + dyy,
  x2: r.x0 - dxx,
  y2: r.y0 + dyy,
  x3: r.x0,
  y3: r.y0
};
var b = {
  x0: l.x1,
  y0: l.y1,
  x1: l.x1 + dxx,
  y1: r.y1 - 5,
  x2: r.x1 - dxx,
  y2: r.y1 - 5,
  x3: r.x1,
  y3: r.y1
};

function d() {
  ctx.beginPath();
  ctx.moveTo(l.x0, l.y0);
  ctx.bezierCurveTo(95, 320, 124, 350, l.x1, l.y1);
  ctx.moveTo(r.x0, r.y0);
  ctx.bezierCurveTo(403, 320, 381, 350, r.x1, r.y1);
  ctx.lineWidth = 1;
  ctx.stroke()

  ctx.beginPath();
  ctx.moveTo(t.x0, t.y0);
  ctx.bezierCurveTo(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(b.x0, b.y0);
  ctx.bezierCurveTo(b.x1, b.y1, b.x2, b.y2, b.x3, b.y3);
  ctx.stroke();

  var imgTest = new Image();
  imgTest.crossOrigin = 'anonymous';
  imgTest.src = "https://preview.ibb.co/eicOYp/sample_Wrap.jpg";
  imgTest.onload = function() {
    //ctx.drawImage(imgTest,0,0);
    var imgpat = ctx.createPattern(imgTest, "no-repeat");
    ctx.fillStyle = imgpat;
    ctx.fill();
  }
}

function draw() {
  ctx.strokeStyle = 'gold';
  ctx.clearRect(0, 0, cdEdit.width, cdEdit.height);
  ctx.drawImage(cup, 0, 0);
  d();
}

<canvas id="cdEdit" width="700px;" height="500px;">
		<canvas id="face" hidden>
		</canvas>
</canvas>