How to draw multiline text with proper background?

[link]

Pixi.js is a great lib and it did help me a lot in building webgl-based apps. 

But when I try to render text with background, I run into some problem:

  1.  PIXI.Text has no straight way to fill a text with background

ok.I tried to search the forum and find some methods like, I can use PIXI.Grahpics to draw a Rect or RoundedRect , then combine the text and the rounded shape into a container so it looks like the text has a background;

In single line text, it appears so good but is this a right way?

  2. I can't find a way to build 'tight' background with multi line text;

What do I mean a 'tight' background? See the pic below:

 

(the pic comes from https://css-tricks.com/multi-line-padded-text/ and if u read the article u can learn some tricks to make these special background in css)

Well, come back to PIXI.js. I know that the text sprite is certainly a Rectangle by default, so when I add a 'background sprite' it's also a Rectangle:)

And I find some useful filters like OutlineFilter but it can't use to outline a text , and I'm not an expert in writing gl shaders.

Has anyone met the situation before(render multiline text with background) or can give me some advice? Thanks very much.

[ivan.popelyshev]

Hello, and Welcome to the forums!

You dont need shaders, you need canvas2d. Write your own updateText. https://github.com/pixijs/pixi.js/blob/dev/packages/text/src/Text.ts#L164 add some fillRect's 

[link]

13 hours ago, ivan.popelyshev said:

Hello, and Welcome to the forums!

You dont need shaders, you need canvas2d. Write your own updateText. https://github.com/pixijs/pixi.js/blob/dev/packages/text/src/Text.ts#L164 add some fillRect's 

Thanks ivan~! Use canvas2d to draw and 'simulate' the bg-style sounds ok..I'll have a try

[themoonrat]

Unfortunately this is the limitation of using the Canvas API to draw text onto a canvas, which then becomes the texture for a Sprite.

https://github.com/Mwni/PIXI.TextInput Isn't what you need, but was one persons way of mixing Pixi and the DOM together

[ivan.popelyshev]

> Unfortunately this is the limitation

Fortunately we dont use WebGL for that