CacheAsBitmap HTML target problem

Haxe
#1

Hello!

this._linesMask.x = this._squaresContainer.x;
this._linesMask.y = this._squaresContainer.y;

this._linesMask.graphics.beginFill(0xFF0000,1);
this._linesMask.graphics.drawRect(0, 0, 500, 500);
this._linesContainer.mask = this._linesMask;
this._linesContainer.cacheAsBitmap = this._linesMask.cacheAsBitmap = true;

In flash - all good, in HTML - mask area cropped by x/y. So if i set x = 0, y = 0 - not cropped. Why so diffrent on flash vs html ?

And the next problem :

this._linesMask.graphics.drawRect(100, 100, 100, 100); now we have a hole mask, in flash ok, html not use hole (((

#2

What if you use openfl test html5 -Dcanvas? Canvas has better masking support than our WebGL target right now

#3

Yes i use it - not working. Really diffrent from flash target, not the same even smaller

U can test it : draw rect, then draw hole in rect ( for example small rect in big rect as hole ) - its mask.
Then draw line - its source. In hole (small rect) line must be invisible, but other - visible.

line.mask = rect;

Test this in flash and html

#4

I could be wrong, but I believe HTML5 canvas masking only works properly if it is a single path. Some drawing commands from Flash are represented by multiple paths, and as such, may not work reliably with canvas masking. Until we implement pixel-by-pixel masking in a custom GL shader, we might not be able to improve this