Eu tenho uma imagem que é um plano de fundo contendo uma área em caixa como esta:

Conheço as posições exatas dos cantos dessa forma e gostaria de colocar outra imagem nela. (Portanto, parece estar dentro da caixa).

Estou ciente do método drawImage para a tela HTML5, mas parece suportar apenas parâmetros x, y, width, height em vez de coordenadas exatas. Como posso desenhar uma imagem em uma tela em um conjunto específico de coordenadas e, idealmente, fazer com que o próprio navegador manipule o alongamento da imagem.