Convert AS3 Gradient Transparency Mask to HTML5 canvas

[Andy Renalson]

I'm struggling to get a gradient transparency mask to work in HTML5 canvas. I realise that I'll need to use AlphaMaskFilter but it is above my skill level. I have had no luck with Adobe support so far but it may be to do with me trying to explain what I need to achieve, it's been Easter, there's a bad flu going round, all the above.

I'll take to blame for being an amateur but I'd really like someone to help. There's a couple of solutions to masking in HTML5 canvas if you search "Gradient Transparency Mask" in the community forum but hard for me to work out how to apply to my situation.

The answer from expert Joäo is much appreciated but hard for me to work out in my case as the .fla provided works on a shape not a scrolling movie clip (but then again it may be because of my skill level).

I've made an example in AS3 and provided as a movie to show exactly the effect that I want to achieve (See the movie below of how I have set it up using AS3 which will not translate straight to HTML5).

see video of how I did it here: https://www.youtube.com/watch?v=DJvDcHsdhIE

When I convert this to HTML5 canvas type it comments out AS3 that wont work. But hopefully it helps to illustrate what I need to achieve. Thanks, Andy

[JoãoCésar]

Hi.

Sorry for the long delay.

I'm investigating your issue.

I was able to create the mask. But I only succeeded when I placed the mask and the text in the main timeline and positioning the mask at 0,0.

I'm still trying to figure it out how to keep the correct position and size of both elements in any position or parent.

Hopefully someone will find out an answer before me.

Regards,

JC

P.S.: In the meantime... Are you able to fake the effect? For exemple inverting the mask using a dark shape with a gradient/hole where the text should be visible?

[Andy Renalson]

Hi JC. Thanks for getting back to me, I really appreciate it. This does seem to be a hard thing to achieve in HTML5 canvas. I've faked it for now using a solid mask with thin strips top and bottom. See video:

[Andy Renalson]

Hi JC. I had trouble getting an answer from Adobe technical support. So we'll put this in the "too hard" basket. I really appreciate your looking into this. Would be cool to get it working but for now I have faked the gradient by using solid lines that make a crude fade... seems to make the client happy 🙂