First we draw a matte in a temporary canvas, and pull out the red values into an array.
Next, the image-to-be-masked is loaded and we read the pixel data into r, g and b arrays.
Finally, we build a new image pixel-by-pixel using the rgb from the image-to-be-masked and alpha (mapped from the red data), of the matte.
Animation is acheived by slice() -ing the matte's array to select how much of it is used.
This assumes a static matte shape, but could be adapted for a dynamic one, although at a greater performance cost.
This effect is lovely, but all browsers other than Chrome really struggle with the animation. So we now have the clipping mask.