Image masking using canvas
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/
Under the hood
There is no magic going on here. Under the hood the script:
- Loops over all the images with a class of
- Creates a new image from its
- 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.