Image Manipulation - add image with corners in exact positions
<p>I have an image which is a background containing a boxed area like this: </p>

<p><a href="https://i.stack.imgur.com/KcQxi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KcQxi.png" alt="Distorted trapezium"></a></p>

<p>I know the exact positions of the corners of that shape, and I'd like to place another image within it. (So it appears to be inside the box).</p>

<p>I'm aware of the drawImage method for HTML5 canvas, but it seems to only support x, y, width, height parameters rather than exact coordinates. How might I draw an image onto a canvas at a specific set of coordinates, and ideally have the browser itself handle stretching the image.</p>