Free drawing over non-transparent .PNG file parts

[PhilCliv]

The globalCompositeOperation in DrawingMode seems not to be working the way I expect. Or my approach is wrong.
I'm trying to do free drawing only on non-transparent parts of a PNG image.
I've been doing deep searches on how to make it work but with no success. Here is what I have so far:

var canvas = new fabric.Canvas('canvas');
canvas.backgroundColor = '#ffffff';

fabric.Image.fromURL('https://i.pinimg.com/originals/49/af/b1/49afb1d21ae594cb7ac3534a15383711.png', function (myImg) {
    var img1 = myImg.set({ left: 0, top: 0, width: 503, height: 343 });
    canvas.add(img1);
});

canvas.isDrawingMode = 1;
canvas.getContext().globalCompositeOperation = 'source-atop';
canvas.freeDrawingBrush.color = "purple";
canvas.freeDrawingBrush.width = 10;
canvas.renderAll();

Here is an example of the result I would like to have, but it's working in native canvas (without Fabric.js) https://stackoverflow.com/a/49228110/6660372
Any suggestions for a solution using Fabric.js? Thank you!

[asturur]

No globalComposite operation won't work because the drawing happens on a separate layer and gets merged later.
You can still do it using the image as a clipPath object.
But i would need to write an example because i m not sure is easy to get there or supported out of the box.
So trying alone could be a huge use of time with uncertain results.
We have at least another issue asking the same thing.

[PhilCliv]

Thank you for the answer. I tried clipping with the image but it doesn't seem to work like this. Here is the jsfiddle link https://jsfiddle.net/PhilCliv/dpf840qn/14/
Is it something like this you were talking about?

var canvas;

$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    canvas.isDrawingMode= 1;
    canvas.freeDrawingBrush.color = "purple";
    canvas.freeDrawingBrush.width = 10;
     var imgInstance = fabric.Image.fromURL('https://i.pinimg.com/originals/49/af/b1/49afb1d21ae594cb7ac3534a15383711.png', function (img) {
        canvas.add(img);
        canvas.renderAll();
    });
 
    canvas.renderAll();

    canvas.on("path:created", (e) => {
      var path = e.path;
      path.set({selectable:false})
      path.clipPath = imgInstance;
    });
});

[PhilCliv]

Or would this approach work as well with Fabric.js ?
"Keep two layers: the one the user is drawing to, and the rendering one.
Draw the user's drawings on the first layer (offscreen canvas) and then do your compositing with the png image on top of this layer on a second canvas, the rendering one."
https://stackoverflow.com/a/49228110/6660372

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ShaMan123]

#6994