Animated, dynamically created, matte mask

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.