With this filter, you can play with complex color operations, such as saturation, brightness, or inversion. This filter uses the ColorMatrix class to perform the action.

The following code snippet defines this class:

ColorMatrixFilter (matrix)

The parameters present in this code snippet are as follows:

Here is an example of using this filter:

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

var shape = new createjs.Shape().set({x:100,y:100});
shape.graphics.beginFill("#ff0000").drawCircle(0,0,50);

var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);
shape.filters = [
 new createjs.ColorMatrixFilter(matrix)
];

shape.cache(-50, -50, 100, 100);
/* add shape to stage and update */
stage.addChild(shape);
stage.update();

In the preceeding example, we created a red circle and then inverted the hue and changed the saturation to 100. We started by creating the stage class in the first line. Then, we created a circle using the drawCircle function. To place the circle in the viewport of the canvas element, we used the set function to change the x and y values.

Then, we initiated the matrix variable using the ColorMatrix class. We used the adjustHue and adjustSaturation functions to change the hue and saturation of the circle. An acceptable value for adjustHue is between -180 to 180. This value for adjustSaturation is between -100 and 100. We set the hue value to 180 and saturation value to 100 in our example to see the difference better.

We applied all using the filter property of the shape variable. Finally, we cached the shape using the cache method and updated the stage using update method to apply the changes.