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

Questions
1

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;
plane.position.set(150,50,200);
sceneHUD.add(plane);

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;
camera.top = cam_height;
camera.bottom = 0;

fitCameraToObject(object_list['bg']);
renderer.setSize(req_image_width, req_image_height);
renderer.domElement.style.width = dom_width + 'px';
renderer.domElement.style.height = 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?