Skip to content
Masking images with canvas - Demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
canvasmask.js Add support for transparent images Oct 6, 2015
centerblur.png adding Jun 15, 2013
index.html fallback Jun 15, 2013
star.png adding Jun 15, 2013

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:

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.

You can’t perform that action at this time.