I want to do infinite resize and infinite repeat backgroundImage on canvas with fabric.js

Question

Here is my code where it is working zoom but the background image is not repeat on zoom with fabric. Here I tried repeat with pattern but still not repeat the background. how can I achieve this when zoom perform with infinite on canvas and then repeat on image of background set.

                    <canvas
                        width="2000"
                        height="1000"
                        id="canvas"
                        style="border: 1px solid #ccc;"
                    ></canvas>
                </div>
                


    function init() {
        let canvas = new fabric.Canvas('canvas')
        var bg = new fabric.Rect({ width: 2000, height: 1000, stroke: 'white', strokeWidth: 0, fill: '', evented: false, selectable: false });
        bg.fill = new fabric.Pattern({ source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAASElEQVQ4y2NkYGD4z0A6+M3AwMBKrGJWBgYGZiibEQ0zIInDaCaoelYyHYcX/GeitomjBo4aOGrgQBj4b7RwGFwGsjAwMDAAAD2/BjgezgsZAAAAAElFTkSuQmCC', repeat: 'repeat' },
            function () { bg.dirty = false; canvas.requestRenderAll() });
        bg.canvas = canvas;
        canvas.backgroundImage = bg;

        canvas.on('mouse:wheel', function (opt) {
            var delta = opt.e.deltaY;
            var zoom = canvas.getZoom();
            zoom *= 0.999 ** delta;
            if (zoom > 20) zoom = 20;
            if (zoom < 0.01) zoom = 0.01;
            canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
            opt.e.preventDefault();
            opt.e.stopPropagation();
            var vpt = this.viewportTransform;
            if (zoom < 0.4) {
                vpt[4] = 200 - 1000 * zoom / 2;
                vpt[5] = 200 - 1000 * zoom / 2;
            } else {
                if (vpt[4] >= 0) {
                    vpt[4] = 0;
                } else if (vpt[4] < canvas.getWidth() - 1000 * zoom) {
                    vpt[4] = canvas.getWidth() - 1000 * zoom;
                }
                if (vpt[5] >= 0) {
                    vpt[5] = 0;
                } else if (vpt[5] < canvas.getHeight() - 1000 * zoom) {
                    vpt[5] = canvas.getHeight() - 1000 * zoom;
                }
            }
        });
     

    }

    onMounted(() => {
        init()
    })