How to distort an image using drawTriangle?

I have a question about Phaser 2.0. Since only Phaser 2.0 has the drawTriangle function. There is an assumption that drawTriangles on Phaser is similar to function on other engines. I managed to study drawTriangles in detail and make a similar function using the library sources. Here is an example:

var canvas, ctx, img;
var num = 2;
var vertices;
var indices;
var uvtData;
var width = 200;
var height = 150;
var xPos = 200;
var yPos = 150;
var dragok = false;// Add your code here
window.onload = function()
{

 var i,j,obj;

    
    
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;







vertices = [196.38440032645163,-96.62102519267636,
						 103.37009957214813,-103.62387441434305,
						 -103.37009957214813,103.62387441434305,
						 96.38440032645163,96.62102519267636,
						 120,120,
						 120,240,
						 240,0,
						 240,120,
						 240,240];
 indices = [0,1,3,
									1,2,3,
									1,4,2,
									4,2,5,
									3,6,4,
									6,4,7,
									4,7,5,
									7,5,8];
uvtData = [0, 0, 0, 0.5, 0, 1, 0.5, 0, 0.5, 0.5, 0.5, 1, 1, 0, 1, 0.5, 1, 1];

var img = new Image();

img.src = "./assets/archer.jpg";
setTimeout(draw1,1000);
var c = ctx;
function draw1()
{
  
    setInterval(() => {
    (
      
                    function() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.save(); 
                        ctx.translate(xPos, yPos);
                        drawTriangles(vertices, indices, uvtData);
                        ctx.restore(); 
                    }).call(this);
    }, 33);
     
}


function drawTriangles(ve, ind, u, tn, lco)
{ 
    var i, j, l = ind.length, c;
    var v = ve, a, k, sw;
    c = ctx;
    
    for (i = 0, j = 0; i < l; i += 3) {
          a = 0;
					c.save();
					c.beginPath();
					c.moveTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
					c.lineTo(v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
					c.lineTo(v[ind[i + 2] * 2], v[ind[i + 2] * 2 + 1]);
					c.lineTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
					c.closePath();
					c.clip();
					if (i % 6 == 0) {
              sw = -1;
              var w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * img.width;
              var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * img.height;
              if (j == 0 && w < 0) {
                  for (k = i + 9; k < l; k += 3) {
                    if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
                      j = k - i;
                      break;
                    }
                  }
                  if (j == 0) {
                    j = l - i;
                  }
                  w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * img.width;
                }
                if (i + j >= l) {
                  w = (u[ind[i + j - l] * 2] - u[ind[i + 1] * 2]) * img.width;
                  sw = u[ind[i] * 2] == 1 ? 0 : img.width * u[ind[i] * 2] + w;
                  if (sw > img.width) {
                    sw -= img.width;
                  }
                } else {
                  sw = img.width * u[ind[i + j] * 2];
                }
                sh = img.height * u[ind[i] * 2 + 1];
                if (h < 0) {
                  h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * img.height;
                  sh = 0;
                }
                var t1 = (v[ind[i + 1] * 2] - v[ind[i] * 2]) / w;
                var t2 = (v[ind[i + 1] * 2 + 1] - v[ind[i] * 2 + 1]) / w;
                var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
                var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
                c.transform(t1, t2, t3, t4, v[ind[i] * 2], v[ind[i] * 2 + 1]);
                
                c.drawImage(img,
									img.x + sw,
									img.y + sh,
									w, h,
									0, 0,
									w, h);
					} 
					else
					{
              var w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * img.width;
              var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * img.height;
              if (j == 0 && w < 0) {
							for (k = i + 9; k < l; k += 3) {
								if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
									j = k - i;
									break;
								}
							}
							if (j == 0) {
								j = l - i;
							}
							w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * img.width;
						}
						if (i + 1 + j >= l) {
							w = (u[ind[i + 1 + j - l] * 2] - u[ind[i + 2] * 2]) * img.width;
							sw = u[ind[i + 1] * 2] == 1 ? 0 : img.width * u[ind[i + 1] * 2] + w;
							if (sw > img.width) {
								sw -= img.width;
							}
						} else {
							sw = img.width * u[ind[i + 1 + j] * 2];
						}
						sh = img.height * u[ind[i] * 2 + 1];
						if (h < 0) {
							h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * img.height;
							sh = 0;
						}
						var t1 = (v[ind[i + 2] * 2] - v[ind[i + 1] * 2]) / w;
						var t2 = (v[ind[i + 2] * 2 + 1] - v[ind[i + 1] * 2 + 1]) / w;
						var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
						var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
						c.transform(t1, t2, t3, t4, v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
						
						c.drawImage(img,
								img.x + sw,
								img.y + sh,
								w, h,
								0, -h,
								w, h);
					}
					c.restore();
    }
}
}

And the result:


Link to example: Plunker - Draw Triangle 2

drawTriangles has more capabilities than just drawing triangles. I’m wondering how to make an image distortion in Phaser, like in my example?
So far I’ve got this:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });




function preload() {
 // game.load.baseURL = 'https://i.imghippo.com/';
  game.load.crossOrigin = 'anonymous';

  game.load.image('archer', 'assets/archer.jpg');
}


  var width1 = 350;
 var height1 = 200;

function create() {

   game.add.image(0, 0, 'archer');
  const graphics = game.add.graphics(0, 0);

   graphics.lineStyle(1, 0xffd900, 1);
   graphics.beginFill(0xFF3300);
   graphics.drawTriangles([196.38440032645163,-96.62102519267636,
						 103.37009957214813,-103.62387441434305,
						 -103.37009957214813,103.62387441434305,
						 96.38440032645163,96.62102519267636,
						 120,120,
						 120,240,
						 240,0,
						 240,120,
						 240,240],
  [0,1,3,
									1,2,3,
									1,4,2,
									4,2,5,
									3,6,4,
									6,4,7,
									4,7,5,
									7,5,8]);
   graphics.endFill();
}


function render() {


}

Result:


Link to example: Plunker - Phaser 2 Image (plnkr.co)

It may be possible with transformCallback.

In Phaser 3 there’s a Mesh game object for this.