Skip to main content
R
randyFuse
Participating Frequently
February 6, 2018
Answered

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

  • February 6, 2018
  • 1 reply
  • 580 views

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)

];

    This topic has been closed for replies.
    Correct answer Colin Holgate

    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'.

    1 reply

    Colin Holgate
    Colin HolgateCorrect answer
    Inspiring
    February 6, 2018

    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'.

    R
    randyFuseAuthor
    Participating Frequently
    February 6, 2018

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

    C
    ClayUUID
    Legend
    February 6, 2018

    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);

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices