Masquerade

With this project I wanted to get some nice results with HTML5's canvas.

The javascript code masks an image or canvas with another image or canvas. First is determined if a mask with transparency or an opaque image is used. Based on that, a mask method is chosen. There are two.

When a mask contains transparency, the alpha channel of the mask is copied into the alpha channel of the image.
With an opaque mask however the value of one of the color channels is copied into the alpha channel of the image. The color channel you use will give different results. With a grayscale mask the color you choose will not make a difference because all color values are equal.
With an opaque grayscale, like this example, the white gets 100% transparent and the black stays opaque. Shades of gray will produce different levels of transparency.
But you can also make black transparent and leave white opaque.

In this example I used some fancy pictures but you can also use pictures with sharp lines and get sharp results.The sky is the limit.