Застрял в вопросе перспективы трансформации изображения ⇐ CSS

[Anonymous]

Проблема:
У меня есть изображение макета с фоновой сценой и назначенным белым патчем, где будет размещено изображение пользователя. Если белый патч - это простой прямоугольник, кружок или квадрат, я могу легко расположить изображение пользователя, поскольку я уже знаю координаты верхней и левой. Тем не менее, проблема возникает, когда белый патч искажен или вращается, например, в случае макетов рекламных щитов. В таких случаях, пока изображение пользователя размещено, оно не соответствует правильному выравниванию с точки зрения вращения или перекоса.
Мой подход
Ниже приведены код и ссылка Glitch.me.

Код: Выделить всё

 
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const backgroundImage = new Image();
backgroundImage.src = "https://cdn.glitch.global/f24ae8ea-0b5b-4b5f-8b3a-811edd5db05c/image.png?v=1730098546330";
const maskImage = new Image();
maskImage.src = "https://cdn.glitch.global/f24ae8ea-0b5b-4b5f-8b3a-811edd5db05c/banner-ad?v=1739343559510";
const maskPath = new Path2D("M0 862.5L39.5 424.5L1250.5 0L1303.5 554.5L0 862.5Z");

backgroundImage.onload = function () {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(264, 211);
ctx.clip(maskPath);
ctx.rotate(-14.3 * Math.PI / 180);
ctx.transform(1.0, 0.15, -0.27, 1.0, 0, 0); // Fine-tuned skew

ctx.drawImage(maskImage, 0, 0, 1303.5, 862.5);
ctx.restore();
};

https://glitch.com/edit/#!/skew-rotation-issue
Обновление:
После добавления вращения и преобразования я приближаюсь к желаемому результату, но не полностью. Вращение составляет 14 градусов от нижней границы прямоугольника (базовая линия) и значений перекоса, которые я получаю с помощью теста и испытания.
мой результат против того, что я хочу:


Подробнее здесь: https://stackoverflow.com/questions/794 ... tion-issue