Note #9663 relates to this issue and was closed as NAB but I do feel you are using measureText improperly in Pixi as prior when I've implemented this approach I've had to consider "actual" bounding box metrics returned from measureText in order to inflate my capturing offscreen appropriately without clipping.

Please Note:

TextMetrics.width:

• The width property represents the advance width of the text, which is the distance to advance the current position in the horizontal direction for the next character.
• This value includes the total space the text will occupy horizontally but doesn’t consider any additional spacing that might be applied to individual glyphs beyond their bounding boxes.

TextMetrics.actualBoundingBoxRight - TextsMetrics.actualBoundingBoxLeft:

• The actualBoundingBoxRight and actualBoundingBoxLeft properties represent the rightmost and leftmost points of the text’s actual bounding box, respectively.
• actualBoundingBoxRight - actualBoundingBoxLeft gives the precise width of the text’s bounding box, which includes the furthest extent of the rendered glyphs.
• This value can be slightly different from width because it measures the exact rendered area, including parts of glyphs that extend beyond the normal advance width.

actualBoundingBoxRight

this is pretty cool! We missed the existance of these props! I just tested it out but did not see precise results when trying to use actualBoundingBoxRight - actualBoundingBoxLeft instead of width. You would think Canvas would be better at this :D

using actualBoundingBox Values:

using width:

Its still an improvment though! To double check, where the bounds 100% accurate for you?

We are pretty time poor at the mo - would be happy to accept a PR when you have the time to correct this! Thanks @CoreyDotCom and @clucier-reve !!

@GoodBoyDigital Sorry I was accidentally logged in with two accounts, lol. So I am not sure why your right edge is not bounded properly but I do understand why your left edge isn't.

The read-only actualBoundingBoxLeft property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; >> positive numbers indicating a distance going left from the given alignment point <<.

Here is a fiddle that seems to have the bounds correct, I've included SVG as well , as this is another option not only for the metrics but for the source of the texture. https://jsfiddle.net/CoreyDotCom/n8rg2cdL/21/

Look for 'BOUNDS COMPUTATION' tag in the code.

Also note, the SVG bounds are inaccurate on Safari (of course they are right?) , so ignore that idea for now.

I am fully unfamiliar with Pixi internals, so might be best for someone in the know to tackle - seems like a pretty impactful fix though.