Masks on HTML5 VS Flash

#1

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();
        black.graphics.beginFill(1);
        black.graphics.drawRect(20, 10, 200, 200);
        black.graphics.endFill();
        black.x = black.y = 0;
          
        var yellow:Sprite = new Sprite();
        yellow.graphics.beginFill(0xFFFF00);
        yellow.graphics.drawRect(10, 10, 300, 100);
        yellow.graphics.endFill();
        yellow.x = yellow.y = 20;
        
        var mask:Sprite = new Sprite();
        mask.graphics.beginFill(0xFF00FF);            
        mask.graphics.moveTo(0, 0);
        mask.graphics.lineTo(50, 100);
        mask.graphics.lineTo(100, 0);
        mask.graphics.lineTo(0, 0);
        
        mask.graphics.endFill();
        mask.x = mask.y = 50;
          
        holder.addChild(black);
        holder.addChild(yellow);
          
        addChild(holder);
        addChild(mask);
        holder.mask = mask;
1 Like
#2

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:

#3

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: https://github.com/openfl/openfl/issues/968

#4

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

#5

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?

#6

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

#7

My example is simply a sprite with graphics set

#8

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;
mask.graphics.beginFill(0xFF00FF, .5);
mask.graphics.drawCircle(200, 200, 200);
addChild(mask);

bitmap.mask = mask;

Any suggestions?

#9

This PR fixed masks in html5 for simple shapes.

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

1 Like