This is a simple demo showing you how to use canvas to mask images in the browser. This can also be done with SVG, but there are a few compatibility issues. CSS filters, I guess, will sooner or later also do the same thing. For now though, all you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. For example:
<img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png">This will take the centerblur.png file and apply it as a mask to red-panda.jpg - in effect taking the alpha of each pixel and change the alpha of the original pixel to that.
You can see it in action here: http://codepo8.github.io/canvas-masking/
There is no magic going on here. Under the hood the script:
- Loops over all the images with a class of
mask - Creates a new image from its
data-maskvalue - Copies the mask image to the canvas
- Changes the compositing of the canvas to
source-atopto merge the images - writes the image back to the image element.
Originally I looped over all the pixels, but this is not needed as pointed out by @jaffathecake on Twitter.