title: Horizontal Scaling Formula Issues
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/dMyOj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dMyOj.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/AKTuO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKTuO.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <pre><code>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 &lt; 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 &amp;&amp; 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;
              }
          }
      }
  </code></pre>