BoxBlurFilter Class
Applies a box blur to DisplayObjects. Note that this filter is fairly CPU intensive, particularly if the quality is set higher than 1.
Example
This example creates a red circle, and then applies a 5 pixel blur to it. It uses the getBounds method to account for the spread that the blur causes.
var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);
var blurFilter = new createjs.BoxBlurFilter(5, 5, 1);
shape.filters = [blurFilter];
var bounds = blurFilter.getBounds();
shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);
See Filter for an more information on applying filters.
Constructor
Methods
applyFilter
-
ctx
-
x
-
y
-
width
-
height
-
[targetCtx]
-
[targetX]
-
[targetY]
Applies the filter to the specified context.
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). Note that currently blur qualities above 1 may not be properly accounted for.
Returns:
initialize
()
protected
Initialization method.
Properties
quality
Number
Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a smoother blur, but take twice as long to run.
Default: 1