FabricJS - 用背景图像剪辑图像

Question

我想使加载的图像被创建的形状剪裁。这是我工作的结果。 https://jsfiddle.net/qqv32b5z/1/

如果添加图像，效果很好。加载的图像将被现有形状剪裁。

当我添加背景图片时，问题就出现了。 带参数source-atop的globalCompositeOperation不是指向形状，而是指向背景图像。

即使加载了背景图像，我怎样才能获得图像被形状剪裁的结果？

这是一个不能按预期工作的版本： https://jsfiddle.net/undss329/

var canvas = new fabric.Canvas('canvas', {
    'selection': false
});
let center = canvas.getCenter();

let currentShape = new fabric.Path('M0,0H63.73L98.64,47H34.91Z', {
    fill: '#333333',
    opacity: 1,
    hasBorders: true,
    hasControls: true,
    hasRotatingPoint: true,
    selectable: true,
    preserveObjectStacking: true,
    objectCaching: false,
    top: center.top,
    left: center.left,
});

canvas.setActiveObject(currentShape);
canvas.add(currentShape);
canvas.renderAll();


canvas.setBackgroundImage('http://fabricjs.com/lib/pug.jpg',
    canvas.renderAll.bind(canvas), {
        scaleX: 1,
        scaleY: 1,
        top: center.top,
        left: center.left,
        originX: 'center',
        originY: 'center'
    });

document.getElementById('image').onchange = function (e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            var image = new fabric.Image(img, {
                objectCaching: false,
                hasControls: true,
                selectable: true
            });
            image.globalCompositeOperation = 'source-atop';
            image.scaleToWidth(currentShape.width);
            image.top = center.top;
            image.left = center.left;
            canvas.add(image);
            canvas.renderAll();
            canvas.setActiveObject(image);
            image.setCoords();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
};