fill pattern with image need to be fixed not repeated

Hello everybody,

i want to ask if there is an idea that to fixed the scale of my image on polygon when user zoom in and zoom out.

I want to keep it fixed without re display it by repeated or something, i want it fixed to fill the polygon.

here is the code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a pattern to a polygon</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = '';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [-105.819711, 39.147614], // starting position
        zoom: 5 // starting zoom
    });

    map.on('load', () => {
        // Add the GeoJSON data.
        map.addSource('source', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [-108.977199, 40.975108],
                            [-102.105019, 40.995138],
                            [-102.078486, 37.017605],
                            [-109.083333, 37.017605],
                            [-108.977199, 40.975108]
                        ]
                    ]
                }
            }
        });

        // Load an image to use as the pattern from an external URL.
        map.loadImage(
            'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
            (err, image) => {
                // Throw an error if something goes wrong.
                if (err) throw err;

                // Add the image to the map style.
                map.addImage('pattern', image);

                // Create a new layer and style it using `fill-pattern`.
                map.addLayer({
                    'id': 'pattern-layer',
                    'type': 'fill',
                    'source': 'source',
                    'paint': {
                        'fill-pattern': 'pattern'
                    }
                });
            }
        );
    });
</script>

</body>
</html>

and i am looking for your help here, thanks

mapbox / mapbox-gl-js

fill pattern with image need to be fixed not repeated #13272