fabric.js根据坐标点绘制多边形来显示一部分的底层图片

patternSourceCanvas的图片的左上顶点和坐标点画出的多边形左上顶点重合且固定，并且多边形移动，图片也跟着移动，怎么将img图片固定地贴在底层canvas上，而不是随着多边形的位置变化而变化。

var canvas = this.__canvas = new fabric.Canvas('canvas3');
fabric.Object.prototype.transparentCorners=false;
fabric.Image.fromURL('./chrom.jpg',function(img){
    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img,0,0);
    patternSourceCanvas.renderAll();
    console.log(patternSourceCanvas.width);
    var pattern = new fabric.Pattern({
        source : patternSourceCanvas.getElement(),
        repeat: 'no-repeat',
    })

    var polygon = new fabric.Polygon( 
        newArr, 
    {
        //left: 0,
        //top: 0,
        centeredRotation:true,
        //angle: -45,
        transparentCorners: true,
        fill: pattern,
        objectCaching:false, 
        strokrWidth:30,
        stroke:'green',
    });
    canvas.add(polygon);
    canvas.renderAll();

    document.getElementById('img-width').oninput = function () {
        img.scaleToWidth(parseInt(this.value,10));
        img.scaleToHeight(parseInt(this.value,10));
        patternSourceCanvas.setDimensions({
          width: img.getScaledWidth(),
          height: img.getScaledHeight(),
        });
        canvas.requestRenderAll();
    };
})

红框就是img的位置，但是我只想完整地将img贴在底层canvas上，然后img中多边形所围出的部分显示出来