I'm currently working with image generation, and have stumbled across an issue that's left me stumped for a few hours. Here's a brief explanation. Below are two profile pictures (tributes) with their respective districts hovering above them. In the case of two tributes, the district text will center above them as shown below.

In the case of more than two, the first two tributes should have the District centered between them, while the last person has it centered above them.

In terms of code, I've found a way to detect such cases. But haven't figured out how the textDestinationX could use the loop to calculate the desired position of the text.

drawDistrictText(ctx, tributeArray) {
        ctx.font = 'bold 28px arial';
        ctx.textBaseline = 'alphabetic';
        ctx.fillStyle = '#ffffff';
        ctx.textAlign = 'center';

        const districtCount = Math.max(Math.ceil(tributeArray.length / 2), 2);
        let textDestinationX;
        let textDestinationY = avatarPaddingY - 15;

        for (let i = 0; i < districtCount; i++) {
            const districtText = `District ${i + 1}`;

            /* detecting if we are on our last iteration,
              and if the total length is odd, meaning there
               must be a district with one user. or if there
               is only 2 tributes.
            */

            if ((i === districtCount - 1 && tributeArray.length % 2 === 1) || tributeArray.length === 2) {
                console.log('center');
            } else {
                console.log('between');
            }

            /* After every 6 tributes, Y position is shifted down
               for the next row. The X position would need to be
               set to it's original position.
            */

            if ((i + 1) % 3 === 0) {
                textDestinationY += avatarSize + avatarSpacingY;
            }
        }
    }