Is it possible to add a Gradient Filter to a Bitmap with EaselJS?

Question

I have a Bitmap inside of a Container. The Container has all the transform properties (these properties are dynamic, they are fetched from the server).

// Container
const display = new createjs.Container();
display.x = 103;
display.y = 44;
display.scaleX = 0.34;
display.scaleY = 0.5;
display.rotation = 35;

// Bitmap
const bitmap = new createjs.Bitmap("trophy.png");

display.addChild(bitmap);

I would like to apply a Gradient Filter to the Bitmap, similar to how I can apply a Color Filter: I would like the end result

bitmap.filters = [
  new createjs.ColorFilter(0,0,0,1, 0,0,255,0)
];

Is this possible? I tried using AlphaMaskFilter but it doesn't seem to be working.

Thank you.

Answer 1

After thinking about it more, there is a much more performant and simple way to get your effect: Use composite operation. AlphaMaskeFilter actually uses this behind the scenes (in Context2D), but if you do it yourself you have a little more control.

Same first steps as the caching approach I posted earlier, but instead of caching, its just one line of code.

1. Load the bitmap
2. Create the gradient overlay
3. Add the bitmap to the stage, followed by the gradient
4. Set the compositeOperation to the gradient shape so that it draws using "source-in". The shape and gradient must overlap.

s.compositeOperation = "source-in"

From the docs:

The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.

This is much simpler in code. Here is an updated fiddle: https://jsfiddle.net/lannymcnie/jm5df4kz/1/

Also, since this is no longer cached, you can do fun things like animate the gradient. https://jsfiddle.net/lannymcnie/cjhdn18L/