Masking images with canvas - Demo http://codepo8.github.io/canvas-masking/
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
canvasmask.js Wait until mask is loaded to prevent empty image bug. Add support for… May 19, 2014
centerblur.png
index.html fallback Jun 15, 2013
readme.md no more loops Jun 15, 2013
red-panda.jpg adding Jun 15, 2013
star.png

readme.md

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 mask
  • Creates a new image from its data-mask value
  • Copies the mask image to the canvas
  • Changes the compositing of the canvas to source-atop to 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.