I am attempting to understand the easeljs ColorFilter and its use with cache. There is quite a bit of information at the easeljs site but it's not clear based upon the examples and documentation.

Draws the display object into a new canvas, which is then used for subsequent draws.

cache (x, y, width, height, [scale=1])

For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:

var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
myShape.cache(-25, -25, 50, 50);

Using that example I loaded an image/bitmap ("ball") and am trying to apply a transformation to change the color.

ball.filters = [
    new createjs.ColorFilter(0,0,0,1, r(255),r(255),r(255),0)

ball.cache(-50, -50, ballImage.width, ballImage.height);

You can see from the before and after images below the results I've generated. BEFORE AFTER

The documentation states that the new cache object is written into another canvas "off screen" but the transformation appears to only be applied where the cache overlaps the image. The image below represents my understanding of this.


Can someone clarify how the ColorFilter and cache are to be used? Ultimately I'm only trying to apply a color change to a bitmap.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.