├── canvasmask.js
├── centerblur.png
├── index.html
├── readme.md
├── red-panda.jpg
└── star.png
/canvasmask.js:
--------------------------------------------------------------------------------
1 | (function(){
2 |
3 | var imagecanvas = document.createElement('canvas');
4 | var imagecontext = imagecanvas.getContext('2d');
5 |
6 | /* uncomment do see the canvas to debug
7 | document.body.appendChild(imagecanvas);
8 | */
9 | window.addEventListener('load', function(){
10 | [].forEach.call(document.querySelectorAll('.mask'), function(img){
11 | var newImg = document.createElement('img');
12 | newImg.src = img.src;
13 |
14 | newImg.onload = function() {
15 | var width = newImg.width;
16 | var height = newImg.height;
17 |
18 | var mask = document.createElement('img');
19 | mask.src = img.getAttribute('data-mask');
20 | mask.onload = function() {
21 | imagecanvas.width = width;
22 | imagecanvas.height = height;
23 |
24 | imagecontext.drawImage(mask, 0, 0, width, height);
25 | imagecontext.globalCompositeOperation = 'source-in';
26 | imagecontext.drawImage(img, 0, 0);
27 |
28 | img.src = imagecanvas.toDataURL();
29 | }
30 | }
31 | });
32 | }, false);
33 |
34 | })();
35 |
--------------------------------------------------------------------------------
/centerblur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codepo8/canvas-masking/e9cacb1940a1aa2d81086a71cd225119d62f9d41/centerblur.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Canvas masking
7 |
46 |
47 |
48 |
49 | Image masking with <canvas>
50 | 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:
51 |
52 | <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png">
53 | <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="star.png">
54 |
55 | Get the source on GitHub
56 |
57 |
58 | Results
59 | 
60 |
61 |
62 |
63 | The Image and masks
64 |
65 | 
66 | 
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | Image masking using canvas
2 | ==========================
3 |
4 | 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:
5 |
6 | ```xml
7 |
8 | ```
9 | 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.
10 |
11 | You can see it in action here: http://codepo8.github.io/canvas-masking/
12 |
13 | Under the hood
14 | ==============
15 |
16 | There is no magic going on here. Under the hood the script:
17 |
18 | * Loops over all the images with a class of `mask`
19 | * Creates a new image from its `data-mask` value
20 | * Copies the mask image to the canvas
21 | * Changes the compositing of the canvas to `source-atop` to merge the images
22 | * writes the image back to the image element.
23 |
24 | Originally I looped over all the pixels, but this is not needed as pointed out by @jaffathecake on Twitter.
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/red-panda.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codepo8/canvas-masking/e9cacb1940a1aa2d81086a71cd225119d62f9d41/red-panda.jpg
--------------------------------------------------------------------------------
/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codepo8/canvas-masking/e9cacb1940a1aa2d81086a71cd225119d62f9d41/star.png
--------------------------------------------------------------------------------