globalCompositeOperation = "destination-in"

[Alex_Matveev]

How use globalCompositeOperation for canvas render?

globalCompositeOperation = "destination-in";

 

[Nesh108]

@Alex_Matveev, pretty sweet page from w3school https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

EDIT: Ops, that's what you meant. My bad!

[ivan.popelyshev]

@Alex_Matveev I have a PR about custom blend modes. https://github.com/pixijs/pixi.js/pull/4049 

This is custom pixijs: http://pixijs.download/dev-blendmodes-class/pixi.js

That's how to use it:

var blend = PIXI.BlendMode.from2d('destination-in');

sprite.blendMode = blend;

Either you hack current version of pixi, either you wait for v5, but canvas renderer will be available only as a plugin.. oh god.. Forget it, just use my patch

[Alex_Matveev]

Thanks, but all png images have black (alpha channel) rectangle

 

[ivan.popelyshev]

Does it work on plain html5 canvas without pixi? Btw i wrote "destionation" instead of "destination", fixed. 

Do you use pixi canvas renderer or webgl?

[Alex_Matveev]

In canvas renderer with png images all good.
But blend mode working is strange...

[ivan.popelyshev]

OK, again. 

1. Do you use my version of pixijs

2. Do you specify PIXI.BlendMode.from2d with correct name ? I made it wrong in previous version.

[Alex_Matveev]

let rec0 = new PIXI.Graphics();
rec0.lineStyle(0);
rec0.beginFill(0xffffff, 1);
rec0.drawRect(300, 300, 300, 300);

let rec1 = new PIXI.Graphics();
rec1.lineStyle(0);
rec1.beginFill(0xff0000, 1);
rec1.drawRect(400, 400, 300, 300);


var blend = PIXI.BlendMode.from2d('source-in');
rec1.blendMode = blend;

this.app.stage.addChild(rec0);
this.app.stage.addChild(rec1);

 

I see part red cube and all screene dark

1. yes

2. yes

[ivan.popelyshev]

Ok, something is wrong with my branch, thank you, now i can test it

[ivan.popelyshev]

Please check it again, I made new version in the same address: http://pixijs.download/dev-blendmodes-class/pixi.js

Is that how its supposed to look? 

[Alex_Matveev]

Yes, all work.

 

[Alex_Matveev]

I can use the blend mode only for the Container (everything screen is visible)?

 

let cont = new PIXI.Container();

let rec0 = new PIXI.Graphics();
rec0.lineStyle(0);
rec0.beginFill(0xffffff, 1);
rec0.drawRect(300, 300, 300, 300);

let rec1 = new PIXI.Graphics();
rec1.lineStyle(0);
rec1.beginFill(0xff0000, 1);
rec1.drawRect(400, 400, 300, 300);
rec1.alpha = 0.5;


var blend = PIXI.BlendMode.from2d('destination-in');
rec1.blendMode = blend;

cont.addChild(rec0);
cont.addChild(rec1);

this.app.stage.addChild(cont);

[ivan.popelyshev]

You can cache the container after you put rec1, rec2 into it:

cont.addChild(rec0);
cont.addChild(rec1);
cont.cacheAsBitmap = true;

That way it will be rendered into separate canvas first. You'll have to fiddle it (false~true) every time you change those things.

All other ways will have to use separate canvas too, even if you go through vanilla html5 canvas 2d context.