The mask don't work on HTML5 and HTML5-DOM

Help
#1

I’m so sorry for my poor english !
I found some questions about mask when the mask is rotating and moving.
For example:

  1. no mask: All platforms are right !

    class Main extends Sprite
    {

    public function new()
    {
    super();
    var test:Sprite = new Sprite();
    test.graphics.beginFill(0xff0000);
    test.graphics.drawRect(0, 0, 200, 200);
    test.graphics.endFill();
    this.addChild(test);

    var mas:Sprite = new Sprite();
mas.graphics.beginFill(0x0000ff);
mas.graphics.drawRect(0, 0, 10, 30);
mas.graphics.endFill();
mas.x = 100;
mas.y = 100;
mas.rotation = -45;

this.addChild(mas);
   //test.mask = mas;

    }
    }
    DISPLAY STATUS:

  2. add mask:

    class Main extends Sprite
    {

    public function new()
    {
    super();
    var test:Sprite = new Sprite();
    test.graphics.beginFill(0xff0000);
    test.graphics.drawRect(0, 0, 200, 200);
    test.graphics.endFill();
    this.addChild(test);

     var mas:Sprite = new Sprite();
 mas.graphics.beginFill(0x0000ff);
 mas.graphics.drawRect(0, 0, 10, 30);
 mas.graphics.endFill();
 mas.x = 100;
 mas.y = 100;
 mas.rotation = -45;

 this.addChild(mas);
     test.mask = mas;

    }
    }
    a) platform: flash is ok.

b) platform: html5 Doesn’t work.

c) platform: html5 -Ddom Doesn’t work.

Rotating and moving the mask is very important for me，I need help, thank you very much !

Webgl mask rotaion bug，大概什么时候可以修复，谢谢！
#2

Does openfl test html5 -Dcanvas work?

#3

Wich version of OpenFL you run ?
Perhaps you need to put the webgl parameters into your xml setting.
<set name="webgl" if="html5" />

#4

Currently, HTML5 and DOM renderers support only square masking (we have plans to enable complex masking in the future using framebuffers and an updated shader), but I think canvas supports more masking types. WebGL is our default on HTML5

#5

I’m very glad to receive your reply :grinning: It’s also doesn’t work!
My IDE is FlashDevelop.
My config

Pasted image741×774 60 KB

but result:

#6

Currnetly. Thanks for your answer, but it doesn’t work:cry:

#7

Oh, I see. I am very excited. :smiley:

Mask related issue
#8

I am sorry this is not completely working, we are tracking enhancements intended for masking here:

#9

Anyway, thank you for your help. I look forward to your good news.

#10

The OpenGL and HTML5 -Ddom renderers use only rectangular masking at the moment, so that’s expected.

The Cairo renderer (like openfl test neko -Dcairo or using bitmapData.draw on native) renders properly, but I see the issue here on canvas. I believe that canvas clipping has a bug here – if we clip without using rotation in the canvas context transform, it works properly. The greater the degree of rotation, though, the more it doesn’t look quite right.

This probably works if the shape itself is drawn with a rotation (using lineTo commands), perhaps in the future, someone might rotate the coordinates within our canvas graphics renderer rather than using a transform

#11

Yes, you are right(using lineTo commands). I’m very very happy. I want to give you a big hug.:grinning::grinning::grinning:

I hope It is useful for others. Look this:

class Main extends Sprite 
{

	var a:Float = 0;
	public function new() 
	{
		super();
		var test:Sprite = new Sprite();
		test.graphics.beginFill(0xff0000);
		test.graphics.drawRect(0, 0, 200, 200);
		test.graphics.endFill();
		this.addChild(test);
		test.x = 100;
		test.y = 100;
		
		var mas:Shape = new Shape();
		mas.x = 100;
		mas.y = 100;
		test.addChild(mas);
		test.mask = mas;
		
		this.addEventListener(Event.ENTER_FRAME, function(e){
			a += 0.25;
			shapeTrans(mas, a / 180 * Math.PI, 0,10, 20, 200);
		});
		
	}
	
	private function shapeTrans(msk:Shape, angle:Float, originX:Float, originY:Float, w:Float, h:Float)
	{
		msk.graphics.clear();
		msk.graphics.lineStyle(1, 0x000000,0);
		
		msk.graphics.moveTo(originX, originY);
		msk.graphics.lineTo(originX + Math.cos(angle) * w, originY + Math.sin(angle) * w);
		msk.graphics.lineTo(originX -Math.sin(angle) * h + Math.cos(angle) * w, originY + Math.cos(angle) * h + Math.sin(angle) * w);
		msk.graphics.lineTo(originX -Math.sin(angle) * h, originY + Math.cos(angle) * h);
		msk.graphics.lineTo(originX, originY);
		msk.graphics.endFill();
		
	}
}

result: html5 platform

It works properly. Very good, but I hope this bug can be repaired as soon as possible. Thanks very very. :laughing: @singmajesty

#12

I was wrong.
It’s works properly(openfl:3.6.1, lime:2.9.1).
It cannot work in the latest version(openfl:4.8.1, lime:3.7.4).

#13

It also doesn’t work(using lineTo commands). on version—>(openfl:4.8.1, lime:3.7.4). it works(openfl:3.6.1, lime:2.9.1).