Masking with text

We want to use text as a mask for an image. Something like this:

As I understand it, PIXI renders text to an image but we need a PIXI.Graphics object to do a mask. Is that correct? If so, does anyone know how I could turn text into a Graphics?

[ivanpopelyshev]

Pixi masks use alpha and red channels. Your text is black, so its 0 by red => no mask.

https://jsfiddle.net/Hackerham/s7hh0590/3/ - it works for White text just fine.

[Cpin0312]

Can i join here? i have read @jhollingworth code and try to do it by my way. however my code like this var app = new PIXI.Application(800, 600, { transparent: true }); document.getElementById('container').appendChild(app.view); PIXI.loader .add('godzilla','https://i.kinja-img.com/gawker-media/image/upload/s--fbE5h4t0--/c_scale,fl_progressive,q_80,w_800/1501840081290294050.jpg') .load(setup_B); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 200, fontWeight: 'bold', });

function setup_A() { var texture = PIXI.loader.resources.godzilla.texture; var godzilla = new PIXI.Sprite(texture); var text = new PIXI.Text('Godzilla', style); text.x = 0 text.y = 100 godzilla.width = 800; godzilla.height = 449; godzilla.mask = text app.stage.addChild(godzilla); text.updateText(); }

function setup_B() { var texture = PIXI.loader.resources.godzilla.texture; var godzilla = new PIXI.Sprite(texture); var text = new PIXI.Text('Godzilla', style); text.x = 0 text.y = 100 godzilla.width = 800; godzilla.height = 449; text.mask = godzilla app.stage.addChild(text); text.updateText(); }

in setup_A, window show nothing , in setup_B, text.mask just show mono,not color. Have missing understanding something?