title: How to place images on a canvas in a grid pattern?
body: <p>I'm looking to add different sized images in a tiled pattern to a set width and height HTML canvas.</p>
  <p>Something like this:
  <a href="https://i.stack.imgur.com/cOMV8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cOMV8.jpg" alt="enter image description here" /></a></p>
  <p>This can be done with a div and CSS grid. Something like:</p>
  <pre><code>.gallery {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
  }
  .wide {
    grid-column: span 2;
  }
  .tall {
    grid-row: span 2;
  }
  </code></pre>
  <p>But to do this with the canvas element I need to work out their positions and dimensions.</p>
  <p>Is there an npm package, algorithm, or technique that I could use to calculate the positions and dimensions of the images to be placed on to the canvas?</p>
  <p>I am using React.</p>