How to apply filters with code?(html/canvas)

[randyFuse]

Below is the code I'm using straight out of createJs docs and I can't seem to get filters to work when I apply them with code. Any help? thanks

var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);

root.myMc.filters = [

     new createjs.ColorMatrixFilter(matrix)

];

[Colin Holgate · Accepted solution]

This took some working out!

Filters only work with objects that are cached, but it turns that you can cache them after applying the filters. Try this:

var mc = this.myMc;

var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);

mc.filters = [

     new createjs.ColorMatrixFilter(matrix)

];

mc.cache(0,0,136,121);

The 136 and 121 just happen to be the width and height of the movieclip I tested on. I don't think there is such a thing as 'root', so I changed it to 'this'.

[randyFuse]

Thank you that was it. I was missing the cache()

[ClayUUID]

If you'd like to set the cache dimensions automatically, you can use the nominalBounds property, which is calculated at publish time and thus guaranteed to be accurate (less any runtime scaling).

var nb = clip.nominalBounds;

clip.filters = [ new createjs.ColorFilter(0.5, 0.5, 0.5, 1, 128, 0, 0, 0) ];

clip.cache(nb.x, nb.y, nb.width, nb.height);