I would expect this [Rect -> Circle 'source-atop' -> Background 'destination-over']

Layered canvas mask with background not affected

'When i try to set the composite operation to the fabric.js background, it has no effect. When try to use native canvas bachground implementation, any interact within the canvas results in disappearing of the background image because its not in the fabric environment.

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;
}

Question: Is it possible to do a background in fabric.js with composite operation? I cant find something about this issue anywhere.

Thanks for helping out here!

The fiddle: https://jsfiddle.net/Metamagikum/2Lpwchzd/50/

Update: I've now reached to get everything in fabric with working composite on the blue circle, but when i try to move the circle, the background looses his composite and the circle appears above the background.

0 Answers