How to Cover a polygon with a fixed image using MapBox?

Question

How can I get an image to cover the polygon without repeating itself or changing size?

I would like to avoid the repeated pattern and also keep the image to the size of the container.

  map.current.addLayer({
                  'id': 'pattern-layer',
                  'type': 'fill',
                  'source': 'source',
                  'paint': {
                    'fill-pattern': 'pattern'
                  }
                });

This will draw the polygon on the map and fill it with and image and apply a tiling when zooming.

In the other hand if I use an image;

map.current.addSource('source', {
              'type': 'image',
              'url': 'https://myImage.png',
              'coordinates': [
                  [-108.977199, 40.975108],
                  [-102.105019, 40.995138],
                  [-102.078486, 37.017605],
                  [-109.083333, 37.017605]
              ]
        });

I have the desired effect, the image stay the same size relatively to the coordinate when I zoom.

But it will not take more than 4 coordinates.

How could I fill a Polygon the same way I use the raster image? If that can be done?