Html 如何隐藏画布中溢出的照片？

我正在尝试在画布上制作相框图案。我想把两张，三张或者更多的照片放在一个覆盖框下。覆盖框架的几个部分是透明的

若我上传照片1到画面的第一部分，它在第二部分也可见，上传照片2到第二部分在第一部分也可见。取决于哪张照片是先上传还是最后编辑的，这张照片与另一张照片重叠

我想知道如何隐藏溢出的照片，所以它不应该在其他部分可见。我怎样才能做到这一点

到目前为止，我已经做到了：

canvas.on({
    'object:moving': onChange,
    'object:scaling': onChange,
    'object:rotating': onChange,
});

function onChange(options) {
    options.target.setCoords();
    canvas.forEachObject(function (obj) {
        if (obj === options.target)
            return;


        if (obj.id != 'cover1' && obj.id != 'cover2')
            return;


        if (options.target.intersectsWithObject(obj)) {

           // Hide this portion

            canvas.renderAll();
        }

    });
}

请为我提供最佳解决方案

您需要在图像上应用clipTo（）方法

var画布；
$（函数（）{
canvas=window.\u canvas=newfabric.canvas（'canvas'）；
var半径=200；
fabric.Image.fromURL（'http://fabricjs.com/assets/pug_small.jpg，函数（img）{
仪表刻度（0.5）设置({
左：250，
排名：250，
角度：-15，
clipTo：功能（ctx）{
弧（0，0，半径，0，数学PI*2，真）；
}
});
canvas.add（img）.setActiveObject（img）；
});
});向我们展示一些代码，你到目前为止都尝试了什么。@Grumpy我已经用代码更新了我的问题。到目前为止，我已经这样做了。我正在使用fabric js。