Masks on HTML5 VS Flash

Same code, different results:

Im drawing 2 rectangles, masking them with a shape triangle.
this is the result on Flash:

this is the result on html5 (no webgl! tried it and webgl doesnt work at all)

seems like its a “negative” of the triangle shape…
this is the shapes without applying the mask:

here is the code:

        var holder:Sprite = new Sprite();
        var black:Sprite = new Sprite();;, 10, 200, 200);;
        black.x = black.y = 0;
        var yellow:Sprite = new Sprite();;, 10, 300, 100);;
        yellow.x = yellow.y = 20;
        var mask:Sprite = new Sprite();;           , 0);, 100);, 0);, 0);
        mask.x = mask.y = 50;
        holder.mask = mask;
1 Like

I’ve had some unfortunate experiences with canvas masking just not being as good as I would expect it. For example, I think it supports only one shape, so we might have code that tries to ignore subsequent draw commands (since the extra commands break the mask entirely). I think a square or a circle works, but I haven’t tried a triangle :confused:

In the example above if you use Shape as a mask instead of Sprite it should work as expected.

I’ve faced some weird bugs when using sprites as masks.
Another bug I’ve experienced was the following one:

Using shapes as mask really works as expected, but we loose the mouse click on HTML5…

ok, finally had some time to try this myself,
Indeed with shape masks, this works correctly!

But what’s the difference between masking with a “shape” mask or a “Sprite” mask that utilizes the graphic object?
Is it that hard to fix to work as expected?

Is it a Sprite with the Graphics set, or is it a Sprite with children which have graphics?

My example is simply a sprite with graphics set

Simple shape masking on html5 doesn’t work for me. I also get the inverted result. However, webgl and linux target works as expected. I haven’t tested others, but I’m sure they work.

Add this to DisplayingABitmap sample:

var mask : Sprite = new Sprite();
mask.x = bitmap.x;
mask.y = bitmap.y;, .5);, 200, 200);

bitmap.mask = mask;

Any suggestions?

This PR fixed masks in html5 for simple shapes.

Before simple shape masks were inverted, showing pixels I was trying to hide.

1 Like