Canvas 覆盖下的织物js图像

我正在用jquery和fabric.js库构建一个画布。我使用以下代码设置覆盖图像：

fabric.Image.fromURL('images/'+$_GET['id']+'.png', function(img) {
    img.set({
        left: (canvasW-img.width)/2,
        top: (canvasH-img.height)/2
    });                                     
    canvas2.setOverlayImage(img,canvas2.renderAll.bind(canvas2));
}); 

fabric.Image.fromURL(e.target.result, function(img) {
    img.set({
        left: (canvasW-w)/2,
        top: (canvasH-w*img.height/img.width)/2,
        scaleX: w/img.width,
        scaleY: w/img.width
    });                                     
    canvas2.add(img);
    canvas2.renderAll();
});

使用代码加载图像时添加：

fabric.Image.fromURL('images/'+$_GET['id']+'.png', function(img) {
    img.set({
        left: (canvasW-img.width)/2,
        top: (canvasH-img.height)/2
    });                                     
    canvas2.setOverlayImage(img,canvas2.renderAll.bind(canvas2));
}); 

fabric.Image.fromURL(e.target.result, function(img) {
    img.set({
        left: (canvasW-w)/2,
        top: (canvasH-w*img.height/img.width)/2,
        scaleX: w/img.width,
        scaleY: w/img.width
    });                                     
    canvas2.add(img);
    canvas2.renderAll();
});

当图像超出覆盖图像区域时，如何将其不透明度更改为0.5？ 比如：