JavaScript画布上的自由变换矩形

我不熟悉JavaScript画布元素。实际上我几个小时前才开始。我正在对图像的矩形部分进行自由变换。（有关我称之为“自由变换”的示例，请参见：。请注意，我不希望允许用户使用此示例中的手柄变换图像。）

我知道一点如何变换大图像，但我只想变换图像的左半部分（例如）。我怎样才能挑出一个部分并自由变换它？我想我应该从加载图像开始。我还打赌解决方案将涉及在左侧标记路径。但是setTransform（）没有给我需要的控件。我希望有一个类似于此的函数：

function freeTransform(canvas, image,
  startX1, startY1, startX2, startY2, startX3, startY3, startX4, startY4,
  endX1, endY1, endX2, endY2, endX3, endY3, endX4, endY4)

但是画布的上下文没有这个功能（据我所知）。有人能告诉我一些方向吗？谢谢。

你说得对

html画布无法使用其公共2d上下文转换矩形的一个角

可以使用“三角剖分”在画布2d中对图像进行变形，使其具有透视效果：

您可以使用画布的3d上下文（webGL）更接近透视变换

可以使用非平行变换在webGL中对图像进行变形，使其具有透视效果：

---

你的回答最终使我走上了正确的道路。有点晚了，但我想说声谢谢，并记下你的答案。