Javascript - Canvas drawImage变换立方体

Question

我有一个脚本，可以通过画布WebGL创建一个3D立方体。我想在立方体的一个面上添加一个图像。但是，我有一些困难找到正确处理图像变换的方法，以便将图像放在立方体面上。

这里的脚本循环遍历多维数据集的每个面以生成行：

canvas.ctx.beginPath();
canvas.ctx.moveTo( this.p0.X, this.p0.Y );
canvas.ctx.lineTo( this.p1.X, this.p1.Y );
canvas.ctx.lineTo( this.p2.X, this.p2.Y );
canvas.ctx.lineTo( this.p3.X, this.p3.Y );
canvas.ctx.closePath();

我不知道如何从我的点数计算变换...为了添加关于立方体的变换图像：

canvas.ctx.save();
canvas.ctx.textAlign = 'center';
canvas.ctx.fillStyle = "black"
canvas.ctx.fillText('text',this.p0.X + ((this.p1.X - this.p0.X)/2), this.p0.Y + ((this.p1.Y - this.p0.Y)/2));
var img = new Image();
img.src = url;
canvas.ctx.drawImage(img, this.p0.X, this.p0.Y, fl, fl);
canvas.ctx.transform(a, b, c, d, e, f);
canvas.ctx.restore();

我猜这是一个数学问题。