Display BitmapText image outside the canvas (WebGL)?

Howdy all.
Has anyone been able to display BitmapText outside the phaser WebGL canvas?

Essentially what I want to do is have a popup appear over my canvas, and be able to set its content dynamically including using BitmapText I generate on the fly in Phaser.

I’ve got a basic popup working. Its a DIV like below, and to get it to appear I change display from “none” to “block” and set width, height, left, top to size and position it how I want. (my phaser canvas has a z-index of 1). This is all working nicely.

<div id="popup"
	style="position: fixed; display: none; width: 1px; height: 1px; top: -1; left: -1; right: 0; bottom: 0; background-color: rgba(255,255,255,1); z-index: 9; ">
	<img id="imgText"/>
</div>

Now I’m trying to dynamically set the img.src value of “imgText” image element I’ve got in the DIV that is outside the phaser canvas. Unfortunately I cant seem to access the image data of the BitmapText object I create in phaser. See example typescript code below:

let popup = document.getElementById("popup"); //get the popup DIV section
let popupImg: HTMLImageElement = popup.children.namedItem("imgText"); //get the img element inside the popup div
let bmpText = this.add.bitmapText(....) //create some bitmap text
popupImg.src = bmpText.texture.getSourceImage(); //set the popup img src...not working :(

The console error I get is:

GET blob:http://localhost:1234/4d7d5e39-419a-4ffa-bbef-8a66b7e8df91 net::ERR_FILE_NOT_FOUND blob:http://localhost:1234/d2f3e2db-774c-47cb-a096-1e436e96e0f9:1

I’ve had a read into BlobURLs and tried a bunch of things to access the underlying image data but to date haven’t been able to get this to work. The first blob url in the error message is what comes directly from bmpText.texture.getSourceImage(). Interestingly the second blob url in the error message is the underlying bitmaptext image sheet with the full characterset on it.

I also tried setTexture() on the BitmapText but when I then grabbed the texture, it had image/png data but alas it was the standard phaser “missing texture” box (the little black box with the green outline and line through it) and the bitmap text back in the my canvas for debug purposes would become corrupted.

One thing to note is I’m running in WebGL, if that matters.

Fallback plan is I can always just create static images, but it would be nice and flexible if I can do this all programmatically and on the fly.

OK after posting I realised there was another option…Webfonts. I have the original TTF font file, so I used FontSquirrel to generate a webfontkit, and after testing it today it appears to be working nicely.