Convert AS3 Gradient Transparency Mask to HTML5 canvas

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