How to calculate matrix transform for Canvas from polar coordinates

Question

I have an image in 3d space of which I know some coordinates. I'd like to use the HTML canvas to re-draw the image into a picture of set width and height.

For example when using this image:

I know the coordinates of the orange dots and I know the width and height of the blue rectangle. I think using HTMLCanvasContext2D.transform should be enough to get the black rectangle drawn in the blue rectangle. However, I can't figure out how to calculate the values for the transform.

I don't even know what to google for. I don't have an advance math background and I don't want to use opencv.

Where would I start? What terms do I search for? Searching "matrix transform" only results in math websites.

I've read the Canvas docs https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform, I've read some wikipedia articles on matrix tranforms, and, I've googled for a number of terms involving canvas, matrix tranform, inverse matrix transform etc. I found this 9year old question, but it was never really answered and most of the links don't work anymore: How to fix image perspective distortion and rotation with JavaScript?