codepo8 / canvas-masking

Masking images with canvas - Demo http://codepo8.github.io/canvas-masking/

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.

canvas-masking's Issues

Problem with image

Hello I have a problem with the loading of images with masks, when the screen loads the image flickers but does not show the picture, I saw the html and it generates the image and canvas, at first everything is ok, but does not work. I await your help.
Link to visualize what happens is: http://labisdesign.com/roma_hostel/?page_id=4

The times in the first loading it works, but sometimes after updating the page or even go to another page that has the problem of masking it.

responsive mask

Is it possible to create a responsive mask with this ?

thank you so much!

Great script! Supposed to work in IE? Probably not?

Just wondering, script supposed to work with < IE9?
I tried to bundle this with https://code.google.com/p/explorercanvas/, but can't get it out of the box too work. so it comes down with IE it seems to @derschepp approach:http://thenittygritty.co/css-masking ?
thank you very much, chris!

update: border-radius does the job!

Animating the mask

I love the script, thanks for that!
One question in regards to animating the mask with canvas:

How would I be able to animate the actual mask (without the image)? Using GSAP I call TweenMax.from('.mask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0);

but that animates the image with the data mask applied, not the mask itself.

Normally I would just add an id to the img tag like so: <img id="starMask" src="star.png" alt="star"> and then call it:
TweenMax.from('#starMask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0);
but since it's canvas it's not working. How would I be able to call the actual mask in order to animate that? Thanks!

I Have img same but it not mask

hi, i using your code, it awesome. But when i use this img, it not mask. I don't know why.
Can you tell my why ?

Not rendering in chrome for iOS

Hi there,

I don't know why it is not rendering on Chorme for iOS.
Certainly issues with browser.
Browser version: 27.0.1453.10

Just thought you'd be interested to know.

Cheers,

Chrome Console Error And Mask Not Working

I downloaded the example files but the masks aren't showing when viewing in the latest Chrome (Mac). I get a console error:"Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at HTMLImageElement.mask.onload (file:///Users/cfuller1/Downloads/canvas-masking-master/canvasmask.js:28:33"

No problem in Firefox. Any idea what the issue is? Thanks~