Why does WebGL scrollable text area display badly, but works fine standalone?

I have created a scrollable text area for my 2D game using the steps described here: https://www.youtube.com/watch?v=5XJBBWI2F0I

T$$anonymous$$s works great when run as a standalone program, but the image being used as a mask extends beyond where it should when I build it with WebGL. If I bring it up locally on my system using Explorer it looks bad unless you put it in full screen mode.

I have the game posted at https://sharemygame.com/@lvskiprof/warlock and there, even when you try to run it in Full Screen mode, it displays incorrectly.

The text scrolls just fine wit$$anonymous$$n the text area, but the image appears as grey that extends above and below the text area. I have attached an example of both Bad and Good images for examples.

I am guessing I somehow need to make the masking image scalable, but it might also be a bug in WebGL and how it handles t$$anonymous$$s, since it works as a standalone program just fine.

Mike Riley