EaselJS comes with a Filter class, which is the base class for all other filters, and other filter classes should inherit from this class. Filters need to be applied to objects that have been cached using the cache method; after that, if the object gets changed again, we should use the cache or updateCache methods to update the shape.

The following is an example of applying filters to an object:

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

/* create and draw the shape */
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(50, 50, 40);

/* add the blur filter to filters property */
circle.filters = [new createjs.BlurFilter(5, 5, 10)];
/* cache the shape to apply the filter */
circle.cache(0, 0, 100, 100);
/* add shape to stage and update */
stage.addChild(circle);
stage.update();

In the first line, we have created a shape object; in the next line, we have created a circle with the color red. The next line contains the filter configurations, and in the last line we have cached the object using the cache function.

Using the cache method in examples with filtering will not only boost performance but will also apply the filter to the shape and make it work.

EaselJS contains several basic filters, such as blur or color filters, that you can use easily. Here is a list of built-in filters:

In the next section, we will discuss all these filters in detail.