带有多个蒙版的fabric.js canvas globalCompositeOperation-不可能将背景用作目标

Question

我希望这个[Rect-> Circle'source-atop'-> Background'destination-over']

the official GitHub repository of Spring Security SAML

'当我尝试将复合操作设置为fabric.js背景时，它没有任何作用。尝试使用本机画布后台实现时，画布内的任何交互都会导致背景图像消失，因为背景图像不在结构环境中。

var canvas = new fabric.Canvas('c');

var red = new fabric.Rect({
    top: 0,
    left: 0,
    width: 300,
    height: 300,
    strokeDashArray: [5, 5],
    stroke: 'black',
    strokeWidth: 5,
    fill: 'red',
    rx: 40
});
canvas.add(red);

var blue = new fabric.Circle({
    top: 150,
    left: 80,
    radius: 100,
    strokeDashArray: [5, 5],
    stroke: 'black',
    strokeWidth: 5,
    fill: 'blue',
    globalCompositeOperation: 'source-atop'
});
canvas.add(blue);

const backgroundImage = new Image();
backgroundImage.src = "https://png.pngtree.com/thumb_back/fw800/back_pic/00/05/53/8756273ec88e3d3.png";

var backgroundLoadedCallback = null;
backgroundImage.onload = function() {
    if (typeof backgroundLoadedCallback === "function") {
        backgroundLoadedCallback();
    }
}

function canvasToTextarea() {

    const myCanvas = document.getElementById('c');
    const ctx = myCanvas.getContext("2d");
    ctx.globalCompositeOperation = "destination-over";
    ctx.drawImage(backgroundImage, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

if (backgroundImage.complete) {
    canvasToTextarea();
} else {
    backgroundLoadedCallback = canvasToTextarea;
}

问题：是否可以通过复合操作在fabric.js中做背景？我在任何地方都找不到有关此问题的信息。

感谢您的帮助！

小提琴：

更新：我现在已经达到了将织物上的所有东西都合成到蓝色圆圈上的效果，但是当我尝试移动圆圈时，背景松开了他的合成物，圆圈出现在背景上方。