How to create such an image generator?

Question

JavaScript

You need to create an image generator on canvas that will output something like this:

let's say there is a background and two types of stones. I will draw the shapes of the stones by hand.
How to create a generator so that the stones are of different sizes and so that they do not lie on top of each other?

Answer 1

Let the stones have a background stroke, then when applied, only a part of the stone from the previous layer will be visible, that is, it will look like it has a recess in which the stone overlapping it lay down. In addition, the stroke can be made uneven for greater realism.