link

updated: After I learn the article in 2nd floor(hours later?).. I realize that the when I try to blend texture I missed the most important part 'Premultiplied Alpha' anyone if u meet some problem like mine , I think the solution would be: Check the image resource is premultiplied or unpremultiplied, then set the texture options base by https://pixijs.download/dev/docs/PIXI.html#ALPHA_MODES And...thanks to the Mr.MasterofGL.Ivan?

? haha~I also spend hours on this weird problem.. I'll try to set the alpha values to see what happen.. Anyway thank you very much!

I had made a codePen demo to show this case(and 2 screen-capture-images below) https://codepen.io/tomleader/pen/jOmNWJG There are 3 buttons(click to see the result) 1. use img: The most common way , sprite.from(imgUrl), everything is ok! 2. use buffer: a little tricky.. the process is [new a Image obj and set src=url, draw Image to another canvas, getImageData from canvas, make a texture from imgData buffer, sprite.from(texture)], and the result seems weird! 3. use dataUrl: the process is [new a Image obj and set src=url, draw Image to another canvas, canvas.toDataURL, make a texture from dataURL, sprite.from(texture)], and the result seems ok! So I think maybe the fromBuffer(imgdata) lost some pixels opacity data? OR I have some mistakes in my code? Any suggestions? Thanks ..

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

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.