Alpha mask about zdog HOT 12 OPEN

FWIW I used canvas compositing for masks in Shade & Shades and Fizzy bear

Please be aware that using illo.width and illo.height for canvas operations will break on HiDPI (Retina) displays. Instead illo.ctx.canvas.width and illo.ctx.canvas.height have to be used.

from zdog.

Are you saying that this can be achieved currently?

@charlesr1971 Yup, albeit a bit unwieldy. Here's a basic example using canvas clip (but the idea also applies to blend modes): https://codepen.io/mootari/pen/gNZKwM

Note that things will get a lot more complicated if you want to use Zdog elements as masks. Also, I haven't looked into the SvgRenderer yet - that one might need some additional trickery to group paths inside the svg (and then apply clip paths to the group).

from zdog.

FWIW I used canvas compositing for masks in Shade & Shades and Fizzy bear

from zdog.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Thanks for this feature request. This is feasible to do in both canvas and SVG, but its not exactly scalable. You need to manage groups of shapes and create separate rendering contexts.

from zdog.

@desandro Hi Desandro. I used to use masks in Adobe Flash. The mask is linked to an object or objects. At this point the mask turns from a coloured shape into a transparent area, that obscures any part of its linked shapes. So, the parts of the linked shapes that are not covered by the mask are still visible.

from zdog.

You can create some really spectacular spotlight effects with opacity masks!

from zdog.

Clipping masks would be great as I want to create a line drawing effect and think it can be achieved by transforming the paths out of the clipping shape. Something like this https://codepen.io/lukemeyrick/pen/eEyqVN

from zdog.

@jvgreenaway Love the rainbow animation. Very cool. Yes. I love clipping masks. It opens up a world of new possibilities!

from zdog.

Just spitballing here: Could this be solved by introducing layers and blendmodes? Each layer would essentially be a lightweight Illustration instance with its own detached canvas/context. The master/root Illustration would propagate all transforms to the layers and merge them in renderGraphCanvas(), right after onPrerender.

from zdog.

@mootari Are you saying that this can be achieved currently? Or would this methodology require some kind of core update.

from zdog.

@mootari Wow. This is great work. What I want to do, is mask some ZDog spheres. So, I have 6 spheres [circular shapes] that rotate in the Z axis around an Anchor in the center of the canvas. When the spheres descend below 0 in the Y+ axis, I want them to be hidden. Essentially, I am trying to animate balls being juggled. I thought maybe I could use a semi circle as a mask, and the balls would disappear behind the semi circle? Do you think this would work with your approach? Thanks...

from zdog.

@mootari Looks like it works perfectly!

https://codepen.io/charles1971/pen/YoBXxP

Thanks very much for your help!

from zdog.