Tengo una imagen que es un fondo que contiene un área encuadrada como esta:

Sé las posiciones exactas de las esquinas de esa forma, y me gustaría colocar otra imagen dentro de ella. (Entonces parece estar dentro de la caja).

Conozco el método drawImage para el lienzo HTML5, pero parece que solo admite parámetros x, y, ancho y alto en lugar de coordenadas exactas. ¿Cómo podría dibujar una imagen en un lienzo en un conjunto específico de coordenadas, e idealmente hacer que el navegador maneje el estiramiento de la imagen?