Skip to content

phpdave/canvas-masking

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Releases

No releases published

Packages

No packages published