API Documentation for: 0.8.2
Show:

Filter Class

Defined in: Filter:41
Module: EaselJS

Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using the cache method. If an object changes, please cache it again, or use updateCache. Note that the filters must be applied before caching.

Example

 myInstance.filters = [
     new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),
     new createjs.BlurFilter(5, 5, 10)
 ];
 myInstance.cache(0,0, 100, 100);

Note that each filter can implement a getBounds method, which returns the margins that need to be applied in order to fully display the filter. For example, the BlurFilter will cause an object to feather outwards, resulting in a margin around the shape.

EaselJS Filters

EaselJS comes with a number of pre-built filters:

Constructor

Filter

()

Defined in Filter:41

Methods

_applyFilter

(
  • imageData
)
Boolean

Defined in _applyFilter:177

Parameters:

  • imageData ImageData

    Target ImageData instance.

Returns:

_createWebGLRenderer

() protected

Attempt to creates a WebGLContextRenderer for fast, efficient filter rendering. Used during filter initialization. If it cannot be done, or this.useGL is set to false, then the filter is rendered normally using a Context2D.

_getFragmentShader Get fragment shader code in GLSL. Filters are responsible for their own fragment shaders.

() String protected

Returns:

_getVertexShader Get vertex shader in GLSL code. This sets the positions of each point on the context in 3D space.

() String protected

Returns:

_initBuffers

(
  • ctx
)
protected

Defined in _initBuffers:213

Setup the buffers and camera for the object. In this case, just create a rectangle that occupies the full stage.

Parameters:

_initShaders

(
  • ctx
)
protected

Defined in _initShaders:156

Setup the shaders for WebGL rendering. Each filter is responsible for its own fragment shader.

Parameters:

_initUniforms

(
  • ctx
)
protected

Defined in _initUniforms:257

Setup the viewport. May change with canvas size.

Parameters:

_initUniforms

(
  • ctx
)
protected

Defined in _initUniforms:273

Pass in textures. May change with updated cache.

Parameters:

_initUniforms

(
  • ctx
)
protected

Defined in _initUniforms:248

Setup the uniforms for the fragment shader. Each filter is responsible for its own fragment shader uniforms, as they are responsible for their own fragment shaders.

Parameters:

applyFilter

(
  • ctx
  • x
  • y
  • width
  • height
  • [targetCtx]
  • [targetX]
  • [targetY]
)
Boolean

Defined in applyFilter:99

Applies the filter to the specified context. Filter only works with WebGL - use subclass applyFilter for individual filters.

Parameters:

  • ctx CanvasRenderingContext2D

    The 2D context to use as the source.

  • x Number

    The x position to use for the source rect.

  • y Number

    The y position to use for the source rect.

  • width Number

    The width to use for the source rect.

  • height Number

    The height to use for the source rect.

  • [targetCtx] CanvasRenderingContext2D optional

    The 2D context to draw the result to. Defaults to the context passed to ctx.

  • [targetX] Number optional

    The x position to draw the result to. Defaults to the value passed to x.

  • [targetY] Number optional

    The y position to draw the result to. Defaults to the value passed to y.

Returns:

Boolean:

If the filter was applied successfully.

applyFilter

(
  • ctx
  • x
  • y
  • width
  • height
  • [targetCtx]
  • [targetX]
  • [targetY]
)
Boolean

Defined in applyFilter:128

Applies the filter to the specified context.

Parameters:

  • ctx CanvasRenderingContext2D

    The 2D context to use as the source.

  • x Number

    The x position to use for the source rect.

  • y Number

    The y position to use for the source rect.

  • width Number

    The width to use for the source rect.

  • height Number

    The height to use for the source rect.

  • [targetCtx] CanvasRenderingContext2D optional

    The 2D context to draw the result to. Defaults to the context passed to ctx.

  • [targetX] Number optional

    The x position to draw the result to. Defaults to the value passed to x.

  • [targetY] Number optional

    The y position to draw the result to. Defaults to the value passed to y.

Returns:

Boolean:

If the filter was applied successfully.

clone

() Filter

Defined in clone:123

Returns a clone of this Filter instance.

Returns:

Filter:

A clone of the current Filter instance.

clone

() Filter

Defined in clone:167

Returns a clone of this Filter instance.

Returns:

Filter:

A clone of the current Filter instance.

getBounds

(
  • [rect]
)
Rectangle

Defined in getBounds:108

Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.

Parameters:

  • [rect] Rectangle optional

    If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.

Returns:

Rectangle:

If a rect param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.

getBounds

() Rectangle

Defined in getBounds:88

Returns a rectangle with values indicating the margins required to draw the filter or null. 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:

Rectangle:

a rectangle object indicating the margins required to draw the filter or null if the filter does not effect bounds.

initialize

() deprecated protected

Defined in initialize:93

REMOVED. Removed in favor of using MySuperClass_constructor. See extend and promote for details.

There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance.

initialize

() protected

Defined in initialize:80

Initialization method.

shaderParamSetup

(
  • gl
  • stage
  • shaderProgram
)

Assign any unique uniforms or other setup functionality here.

Parameters:

  • gl WebGLContext

    The context associated with the stage performing the render.

  • stage SpriteStage

    The stage instance that will be rendering.

  • shaderProgram ShaderProgram

    The compiled shader that is going to be sued to perform the render.

toString

() String

Defined in toString:158

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

toString

() String

Defined in toString:114

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

Properties

FRAG_SHADER

String

Defined in FRAG_SHADER:81

Pre-processing shader code, will be parsed before being fed in. This should be based upon SpriteStage.SHADER_FRAGMENT_BODY_REGULAR

VTX_SHADER

String

Defined in VTX_SHADER:71

Pre-processing shader code, will be parsed before being fed in. This should be based upon SpriteStage.SHADER_VERTEX_BODY_REGULAR