globalCompositeOperation source-atop doesn't work

[rivdiv]

For regular text objects, the globalCompositeOperation = source-atop works to prevent the text from going outside the canvas background shape.

For curved text objects, that property doesn't do anything.

See fiddle: https://jsfiddle.net/rivdiv/k4963a9q/2/ (click both buttons)

[Ivangelion]

Is this bug solved? I also had this problem. Any help would be greatly appreciated.

[rivdiv]

@Ivangelion I ended up using SVG instead of an image to achieve my goal.

    fabric.loadSVGFromURL(svgURL, function (objects, options) {
        var shape = fabric.util.groupSVGElements(objects, options);

        canvas.clipTo = function (ctx) {
            shape.render(ctx);
        };
        canvas.renderAll();
    });

[taifok]

globalCompositeOperation source-atop has to be applied on every object in the group of the curvedText

curvedTextObject.letters._objects.forEach((object) => {
  object.globalCompositeOperation = 'source-atop';
})

see modified fiddle: https://jsfiddle.net/k4963a9q/11/

[EffEPi]

Can you please do a pull request and I will merge it ? Thank you Fabry

…

On Mon, Oct 16, 2017 at 5:36 AM, taifok ***@***.***> wrote: globalCompositeOperation source-atop has to be applied on every object in the group of the curvedText curvedTextObjects.letters._objects.forEach((object) => { object.globalCompositeOperation = 'source-atop'; }) see modified fiddle: https://jsfiddle.net/k4963a9q/11/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#26 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2JZmIfMYcJSjNoabjG1zdGD20E6cmNks5ssyOVgaJpZM4HDSBy> .

-- Fabrizio Parrella ---- Download OurSticky Add Persistent Notes anywhere on any webpage, they will reappear when you re-open the page.https://chrome.google.com/webstore/detail/ourstickys/oficbemndigeiiennldcdfcklocpkggd