HTML5 drag text mask and record drag

I have something cool in mind for a new personal project, more to update my skills really, but need开发者_如何学Python a push in the right direction. It's a bit difficult for me to explain so bear with me.

Users can basically color the fill of a piece of text from left to right. They can do so, by dragging from the left to right. To achieve this I was thinking of [HTML5's text/image mask][1]. Users would then basically drag the text mask from left to right, and it would appear as they "colored" in the piece of text..

Now here is the difficult part; I want to record this drag and to allow users to replay how it was "colored" in by the user. So how fast/slow at different positions of the text.

Please let me know if my explanation unclear, otherwise I'd love to hear your suggestion/hint.

Thanks again!

---

Seems like no one have been on this road, where the fill of a text is animated through a drag. The closest I got was this: http://jsbin.com/ubaxi/ An animation of the fill with the canvas tag. Not very useful for my case, but still worth mentioning.

Also interesting, and maybe the way to go: Using jQuery animate on canvas objects