Image masking with <canvas>

This is a small demo how to mask images with canvas. Simply add the canvasmask.js file, add a class mask to the images you want to mask and their mask PNG file as a data-mask. For example:

  <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png">
  <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="star.png">

Get the source on GitHub

Results

Red panda Red panda

The Image and masks

Red panda center blur star