bitmapData.draw crops in HTML5

#1

I’ve tried to use ColorTransform in bitmapData.draw to change the tint color, but once I use the ColorTransform I get a cropped bitmap in HTML5 target, but the same code would work fine in Flash target.

Flash target:

Html5:

Any advice? or another way to change tint in HTML5?

#2

Hi hopewise.

You’re problem might be related to this:
http://community.openfl.org/t/bug-graphics-drawtriangles-if-targeting-html5/8029

You could try moving your images in such a way that nothing extends into negative coordinate space.

#3

ColorTransform when using BitmapData#draw doesn’t apply the matrix transformation first, and the result is what you see. Any ideas welcome

#4

Thanks @obscure for point out that, but that would be lots of work, as I am having the origin point in the center of each movie-clip… and it may effect other center related logic in my app…

#5

This is actually a bug that is not restricted to HTML5. I also experienced it on cpp targets.
As soon as you use a colorTransform with a matrix in the draw() function of bitmapdata, the colortransform is only applied to region of the bitmapdata pre matrix transform. And all parts that would be outside of that region post matrix transformation is cropped.
For example, if you have a 10x10 square shape on which you apply a matrix.translate(4,4) and a colortransform, only a 6x6 square will appear (with the colortransform applied to it). The rest is just cropped…
Don’t know what is the origin of this bug but it is really annoying actually

#6

up. This bug needs to be fixed…