Adjust flat map image for other projections

Question

I'm using D3.js to create a globe. I have a working SVG wife-frame version, and I'm also trying to create a more detailed textured one, a two-mode thing.

The image I'm using from an API is square:

Which doesn't really work out well when projected to orthographic, it's a lot more "squished" towards the equator than it should be:

Not doing anything particularly special:

const dx = 2048;
const dy = 2048;
const width = 2048;
const height = 2048;
        
let sourceData = mapImage.getImageData(0, 0, dx, dy).data,
    target = ctx.createImageData(width, height),
    targetData = target.data;

for (let y = 0, i = -1; y < height; ++y) {
    for (let x = 0; x < width; ++x) {
        let p = projection.invert([x, y]);
        if (p[0] > 180 || p[0] < -180 || p[1] > 90 || p[1] < -90) {
            i += 4;
            continue;
        }
        let q = ((90 - p[1]) / 180 * dy | 0) * dx + ((180 + p[0]) / 360 * dx | 0) << 2;
        targetData[++i] = sourceData[q];
        targetData[++i] = sourceData[++q];
        targetData[++i] = sourceData[++q];
        targetData[++i] = 255;
    }
}
ctx.clearRect(0, 0, width, height);
ctx.putImageData(target, 0, 0);

I'm wondering if there's a straightforward way to make the additional adjustment for the stretching of the map image?

(Bonus points if you can also point me to why the space around the globe is not transparent? But that's not the main question here.)