How to align and prevent stretched image while downloading an image of a 3D scene?

I have a 600x900 canvas on my webpage which has a 3D scene Inside. The part that can be viewed inside the canvas can be downloaded in the Image form.

Whenever I Click on Download Image Button a Dialog takes input of the Height and Width of the Image and then we can click Download to finally download the Image

There are, however 2 scenes initialized with one acting as a Heads-up Display. By default, I’m adding a plane to sceneHUD which will be the Heads-up Display.

The code of adding the plane looks like this

// img is an Image 
let plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), img);
plane.overdraw = true;

Now this is the code that set-up the Image that needs to be downloaded:

camera.left = -cam_width / 2;
camera.right = cam_width / 2; = cam_height;
camera.bottom = 0;

renderer.setSize(req_image_width, req_image_height); = dom_width + 'px'; = dom_height + 'px';

renderer.render(scene, camera);
renderer.render(sceneHUD, cameraHUD);

The renderer.domElement is then assigned to the variable and then downloaded with the HUD on the bottom right.

The problem is, if the entered a different value for height or widhth, the HUD gets aligned at lower-right corner of image but it gets stretched horizontally and/or vertically depending on the dimensions.
How can this be resolved?