I'm looking to add different sized images in a tiled pattern to a set width and height HTML canvas.

Something like this:

This can be done with a div and CSS grid. Something like:

.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;
}

But to do this with the canvas element I need to work out their positions and dimensions.

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?

I am using React.