Mask with Texture.fromCanvas()

[bazyll]

Hello guys,

I'm trying to setup a complex mask, with several animated graphics (circles)

To do that I use PIXI.Texture.fromCanvas as a  texture for my mask

 

I have a "renderer" and "stage" elements for my main scene which containes the object I want to be masked (title_cont)

renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight)document.getElementById('main').appendChild renderer.viewstage = new PIXI.Stage()renderer.render(stage)

and another separated Stage and renderer to draw and update my mask content

 

renderer_mask = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight)stage_mask = new PIXI.Stage()

then my mask this way :

I attach the mask graphics to "stage_mask" and the mask sprite itslef to "stage"

mask_cont = new PIXI.Container();mask_cont.x = Math.floor( (@dims.w / 2) )mask_cont.y = Math.floor( (@dims.h / 2) )circle1 = new PIXI.Graphics();circle1.lineStyle(0);circle1.beginFill(0xFFFF0B, 0.5);circle1.drawCircle(0 , 0 , 50);circle1.endFill();mask_cont.addChild(circle1);stage_mask.addChild(mask_cont);fromcanvas_texture = PIXI.Texture.fromCanvas(renderer_mask.view);mask_sp = new PIXI.Sprite(fromcanvas_texture)mask_sp.x = mask_cont.x;mask_sp.y = mask_cont.y;stage.addChild(mask_sp);

but it doesnt really render anything (no code error though)

of course both stage are animated this way :

requestAnimationFrame(animate)renderer.render(stage)

Is it because I can't use a 2nd PIXI stage and rendere to draw mask mask ?

 

I also found a way to do it by creating a classic canvas element like this :

var canvas = document.createElement('canvas');var texture = PIXI.Texture.fromCanvas(canvas);var spriteMask = new PIXI.Texture(texture);// how to animate "canvas" here and update it?mySprite.mask = spriteMask;

but using this way I just really don't get how to draw something and animate in 'canvas' 

can we use PIXI for that or only standard javascript methods ?

 

 

thanks for your help

 

[bazyll]

update : 

actually I made it work with the regular var canvas = document.createElement('canvas');

 

but I really need ot make it work with 2 Pixi renderers for animation purposes

 

I also replaced Stage instances by PIXI.Container() since I'm using pixi v3

but stilll get the same result :

 

stage is showing its sprites as expected 

mask_sp made with Texture.fromCanvas() is only showing a black rectangle with 'renderer_mask' dimensions, circle1 not showing at all

 

not code errors in console

 
 

 
 

[bazyll]

solved,

just found that I needed to call upate() on the texture from canvas 

[ivan.popelyshev]

1) use CanvasRenderingContext for your renderer_mask. Yes, you can use simple canvas. 

2) you need to call update() on the texture after you change it, its a requirement for webgl mode.