AlphaMaskFilter Class
Applies the alpha from the mask image (or canvas) to the target, such that the alpha channel of the result will be derived from the mask, and the RGB channels will be copied from the target. This can be used, for example, to apply an alpha mask to a display object. This can also be used to combine a JPG compressed RGB image with a PNG32 alpha mask, which can result in a much smaller file size than a single PNG32 containing ARGB.
IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.
Example
This example draws a gradient box, then caches it and uses the "cacheCanvas" as the alpha mask on a 100x100 image.
var box = new createjs.Shape();
box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 100, 100)
box.graphics.drawRect(0, 0, 100, 100);
box.cache(0, 0, 100, 100);
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.filters = [
new createjs.AlphaMaskFilter(box.cacheCanvas)
];
bmp.cache(0, 0, 100, 100);
See Filter for more information on applying filters.
Constructor
AlphaMaskFilter
-
mask
Parameters:
-
mask
Image
Methods
applyFilter
-
ctx
-
x
-
y
-
width
-
height
-
[targetCtx]
-
[targetX]
-
[targetY]
Applies the filter to the specified context.
IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.
Parameters:
-
ctx
CanvasRenderingContext2DThe 2D context to use as the source.
-
x
NumberThe x position to use for the source rect.
-
y
NumberThe y position to use for the source rect.
-
width
NumberThe width to use for the source rect.
-
height
NumberThe height to use for the source rect.
-
[targetCtx]
CanvasRenderingContext2D optionalThe 2D context to draw the result to. Defaults to the context passed to ctx.
-
[targetX]
Number optionalThe x position to draw the result to. Defaults to the value passed to x.
-
[targetY]
Number optionalThe y position to draw the result to. Defaults to the value passed to y.
Returns:
clone
()
Filter
Returns a clone of this Filter instance.
Returns:
getBounds
()
Rectangle
Returns a rectangle with values indicating the margins required to draw the filter. For example, a filter that will extend the drawing area 4 pixels to the left, and 7 pixels to the right (but no pixels up or down) would return a rectangle with (x=-4, y=0, width=11, height=0).
Returns:
initialize
()
protected
Initialization method.
Properties
mask
Image
The image (or canvas) to use as the mask.