Question about ColorTransform and BitmapData.draw() in HTML

I’ve been having some trouble getting colorTransform properties to show up properly when drawing an object into BitmapData in HTML. Is this a known issue, or maybe I’m doing something wrong?

Here’s an example:

var sourceData = new BitmapData(100,100);
var source = new Bitmap(sourceData);

var tx = new openfl.geom.ColorTransform();
tx.color = 0xFF0000;
source.transform.colorTransform = tx;

var destData = new BitmapData(100,100);
var dest = new Bitmap(destData);
dest.x = 100;

Which I would expect to display two red squares, side by side. The square filled using draw() shows up as black, however:


It appears that the square being black may be related to the colorTransform r/g/b multipliers being set to 0 somehow? I noticed that if any of them are non-zero then that channel seems to end up being set to 0xFF instead of 0x0 - e.g., if I set tx.greenMultiplier to any non-zero value, then the destination square ends up displayed as 0x00FF00.

By default, the draw(…) function doesn’t automatically use the source object’s transform properties. You have to pass the color transform in as an optional third parameter. So in your case, it would be:

destData.draw(source, null, tx);

More details on the function here and all its required and optional parameters here:

Thanks for the response - I saw that the draw call takes a transform, but I ran into this problem by trying to draw() a Tilemap that has lots of tile objects, each with their own color transform. I don’t think a single color transform param will help me here.

I suppose I could walk through the display list and draw() each tile passing in its color transform, but I was hoping there was a better way.

It still seems like there is a bug here as well, since if the color transform is ignored then the second square should be white, not black. I tested in Flash just now, and it is white on that platform.

I’ve opened an issue here:

Thank you :slight_smile: