Stuck in Perspective Image Transformation Issue

Question

Problem:

I have a mockup image with a background scene and a designated white patch where the user’s image will be placed. If the white patch is a simple rectangle, circle, or square, I can easily position the user’s image since I already know the top and left coordinates. However, the issue arises when the white patch is skewed or rotated for instance in case of billboard mockups. In such cases, while the user’s image is placed, it does not align correctly in terms of rotation or skew.

My approach

I experimented with multiple rotation values, and while the image does rotate, it still doesn’t fully blend in as if the user’s image is truly part of the banner. Below are the code and the Glitch.me link.

I appreciate if someone can help me in this regard so any resource link for deeper knowledge.

 <script> 
    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();
    };
    
    
    
    
  </script>

https://glitch.com/edit/#!/skew-rotation-issue

My result vs what i want:

Update:

After adding rotation and transform, i get close to desired result but not fully. Rotation is 14 deg from bottom boundary of rectangle (base line) and skew values i get via test and trial.