The AlphaMapFilter is an built-in filter is used for applying a grayscale alpha map image (or canvas) to the target. To be clearer, the alpha channel of the result will be copied from the red channel of the map and the RGB channels will be copied from the target object.

This has been taken from: http://www.createjs.com/Docs/EaselJS/classes/AlphaMapFilter.html

The following code snippet is the definition for this class:

AlphaMapFilter (alphaMap)

The parameters are as follows:

alphaMap | Image | HTMLCanvasElement

We have used the grayscale image or the canvas as the alpha channel. It should be of the same dimensions as the target.

The following code is an example of using the AlphaMapFilter class:

/* Add canvas and stage */
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

/* Create filter */
var box = new createjs.Shape();
box.graphics.beginLinearGradientFill(["#0000ff", "#ff0000"], [1, 0], 0, 0, 0, 300)
box.graphics.drawRect(0, 0, 300, 300);
box.cache(0, 0, 300, 300);

/* create the second shape */
var box2 = new createjs.Shape();
box2.graphics.beginLinearGradientFill(["#0000ff", "#ff0000"], [0, 1], 0, 0, 0, 300);
box2.graphics.drawRect(0, 0, 300, 300);

/* Add filter to box2 */
box2.filters = [
  new createjs.AlphaMapFilter(box.cacheCanvas)
];
/* and finally, cache the shape to apply changes */
box2.cache(0, 0, 300, 300);

/* Add bitmap to stage and update stage */ 
stage.addChild(box2);
stage.update();

In the first few lines of the code, we created a rectangle created with a linear gradient and then cached the object using cache method. The reason for caching the object is to use it in the filter parameters.

Then, we created the box2 variable; it's our parent shape. This shape is the same as the first one, but the gradient color is different. We have changed the colors for the start and end of the linear gradient. Afterward, we added AlphaMapFilter to the box2 filters and the box variable as the parameter of the filter. Then, in to order apply the filter to the shape, we cached the shape using the cache method and added it to the stage.

A preview of the previous example is shown in the following image: