Creating a gradient transparency mask for movie clip in html5 canvas

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

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/10933670?page=1#M201502

Regards,

JC