Skip to content

benmcmaster/Canvas-Mask

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Canvas Mask Utility

Use HTML5 Canvas to apply an alpha mask to an image element. Compatible with any browser supporting Canvas.

Tested with Chrome 11 and Firefox 3.6+

Demo

Simple animation demo can be found here: http://playground.benbarnett.net/canvas-mask/

What it does

The function will use HTML5 Canvas to read alpha data from a PNG-24, and apply this to any image element. I have often used this technique to take advantage of the smaller file sizes with JPEG, and then a 2 colour PNG-24 to apply the transparency.

Example images:

JPEG Image: http://playground.benbarnett.net/canvas-mask/img/octagon.jpg

PNG-24 Mask: http://playground.benbarnett.net/canvas-mask/img/alpha.png

Usage

Simply pass in two image elements (pre-loaded, as shown on demo), the width and the height and you're done.

By default the function will return Canvas pixel data which you can then use to draw on to a Canvas. For example:

output.putImageData(
	applyCanvasMask(<BASE IMAGE>, <MASK IMAGE>, width, height), 0, 0, 0, 0, width, height
);

Alternatively, you can specify a 5th parameter to have the function return the masked image as a Base64 encoded data URL. This is useful for applying to background images. For example:

$('body').css({
	'background-image': 'url(' + applyCanvasMask(<BASE IMAGE>, <MASK IMAGE>, width, height, true) + ')'
});

Changelog

0.1 (02/06/2011):

  • Initial release.

Credits

About

Use HTML5 Canvas to apply an alpha mask to an image element.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%