globalCompositeOperation source-atop doesn't work

rivdiv commented 8 years ago

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 commented 7 years ago

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

rivdiv commented 7 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 notifications@github.com 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 https://github.com/EffEPi/fabric.curvedText/issues/26#issuecomment-336833665, 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

EffEPi / fabric.curvedText

globalCompositeOperation source-atop doesn't work #26

Fabrizio Parrella