title: Calculate how many elements will fit on image when spaces are involved
body: <p>I need to render <code>N</code> items that are <code>x</code> pixels wide with <code>N-1</code> spaces <code>y</code> pixels wide between them.</p>
  <p>I need to calculate how many items will fir on the screen. What I'm doing is rendering an array of amplitudes as columns. This is my test produce without spaces:</p>
  <p><a href="https://i.stack.imgur.com/vqj4z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vqj4z.png" alt="enter image description here" /></a></p>
  <p>I first calculate how many items will fit, then resample the original array to get exactly the number of values that will fit on the screen. This is the same with 5 pixels per column, you can see that the original array has been resampled:</p>
  <p><a href="https://i.stack.imgur.com/3bS0t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3bS0t.png" alt="enter image description here" /></a></p>
  <p>The formula I use now is <code>no_items = Math.floor(canvasWidth/(barWidth+spaceWidth))</code>:</p>
  <pre><code>/**
   * Recalculates waveform data for given width of canvas
   * @param {number} canvasWidth Image width in pixels
   * @param {number} barWidth Width of waveform bars
   * @param {number} spaceWidth Width of spaces between bars
   * @returns {Uint8Array} recalculated bytes
   */
  recalculateForWidth(canvasWidth, barWidth, spaceWidth) {
      const no_items = Math.floor(canvasWidth/(barWidth+spaceWidth))
      const result = new Uint8Array(no_items);
      // Resampling code follows
      ...
      return result;
  }
  </code></pre>
  <p>But that clearly assumes one extra space at the end of the data - it simply calculates with item width being bar width+ space width.</p>
  <p>I want to render bars without space at the end, so how do I calculate how many will fit with spaces but without space at the end?</p>