Creating a gradient transparency mask for movie clip in html5 canvas

[Big Daddy Edits]

I have scrolling text in a movieclip that I want to fade in and out (top and bottom) using a gradient transparency mask. This has to be output as HTML5 canvas. How do you create a transparency mask with faded out edges? 

[JoãoCésar]

Hi.

You're gonna need an AlphaMaskFilter for this task.

Please see this answer:

https://community.adobe.com/t5/animate/how-to-do-make-a-working-gradient-mask-in-html5-canvas/m-p/10...

Regards,

JC

[Big Daddy Edits]

Thanks for your quick reply. Sorry, I can't work it out....

Here's an AS3 version of what I want to achieve in HTML5 canvas though. 

Thankyou.

Andy

[Big Daddy Edits]

I'm struggling to get this 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 but it may be to do with me trying to explain what I need to achieve. I'll take to blame for being an amateur but I'd really like someone to help.

There's a couple of solutions if you search "Gradient Transparency Mask" but hard for me to work out how to apply to my situation. The answer from 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). Can anyone can help me?

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).

Hopefully it helps to illustrate what I need to achieve.

Thanks, Andy