Drawing rectangle underneath PIXI.Text
<p>In a word game I am trying to draw score as white numbers above a blue (or red) rectangle:</p>

<p><a href="https://i.stack.imgur.com/ggsVI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ggsVI.png" alt="screenshot"></a></p>

<p>For example, in the above screenshot it is the number "13".</p>

<p>Here is my entire class <code>Score.js</code> (with currently hardcoded <code>WIDTH</code> and <code>HEIGHT</code>):</p>

<pre><code>"use strict";

function Score(color) {
        PIXI.Container.call(this);

        this.interactive = false;
        this.buttonMode = false;
        this.visible = false;

        this.bgGraphics = new PIXI.Graphics();
        this.bgGraphics.beginFill(color, 1);
        this.bgGraphics.drawRect(0, 0, Score.WIDTH, Score.HEIGHT);
        this.bgGraphics.endFill();
        this.addChild(this.bgGraphics);

        this.text = new PIXI.Text('XXX', {font: '20px Arial', fill: 0xFFFFFF});
        this.text.x = 1;
        this.text.y = 1;
        this.addChild(this.text);
}

Score.prototype = Object.create(PIXI.Container.prototype);
Score.prototype.constructor = Score;

Score.WIDTH  = 36;
Score.HEIGHT = 24;

Score.prototype.setText = function(str) {
        this.text.text = str;
}
</code></pre>

<p>I wonder, how to modify my <code>setText()</code> function, so that a new rectangle is drawn on each call - as a bounding rectangle for the <code>str</code> argument?</p>

<p>I have looked at the <a href="https://pixijs.github.io/docs/PIXI.Text.html#getBounds" rel="nofollow noreferrer">PIXI.Text.getBounds()</a> method, but it returns a <code>Matrix</code> and not a <code>Rectangle</code>...</p>