How can I use the globalCompositeOperation with Paper.js? (to do fancy things like "anti-aliased path cropping")

[Brynjar Harðarson]

globalCompositeOperation is a feature of canvas which is explained here: https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Right now I can do what I want without it up to a point, I can fill a path with an image for example but the image is not anti-aliased, e.x.: http://jsbin.com/udarip/1

With globalCompositeOperation in regular canvas I can crop an image with a path and have it be anti-aliased like so: http://jsbin.com/akisah/3

But so far I haven't been able to combine globalCompositeOperation with Paper.js, is there an easy way to do this or do I need to hack Paper.js to accomplish this at the moment?

[Brynjar Harðarson]

Oh and I should perhaps mention that Paper.js does anti-alias when path cropping / clipping in most browsers, but not in Chrome, if I remember correctly, and I need it to do so in all browser, hence the need for globalCompositeOperation

[Eskel]

Hi, I'm looking for a solution for exactly the same problem. Have you figured out something?

I'd love to hear from the authors of the library. Is there a way to contact them about the issue?

[Jürg Lehni]

globalCompositeOperation is supported on an item level through the Item#blendMode property:

http://paperjs.org/reference/item/#blendmode

Note that clipping in paper.js is implemented differently, on a vector-graphics level, using the Context#clip() command.

If Chrome's Skia library implements vector clipping without aliasing, then that's not our fault, it's Chrome not following the specs fully, I'd imagine. You would have to submit a bug report over at https://code.google.com/p/chromium/issues/entry

Best,

Jürg

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.