# DrawText with Transparent Background

**URL:** <https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521>\
**Category:** Questions\
**Created:** [September 7, 2019, 10:17pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521 "2019-09-07T22:17:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coolroar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/coolroar/32/246_2.png) [@Coolroar](https://forum.babylonjs.com/u/Coolroar)\
**Post date:** [September 7, 2019, 10:17pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/1 "2019-09-07T22:17:04Z")

</div>

Hi All, it’s been awhile (last post at HTMLDevs).  
I want text with transparent background in my next BIG project (to be posted real-soon-now).  
My method: [playground](https://playground.babylonjs.com/#ZM0BGX)

- Works in Chrome.
- Works in Firefox.
- **Fails** in Microsoft Edge.

Can you offer correction or work-a-round?

Thanks!

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [September 7, 2019, 10:49pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/2 "2019-09-07T22:49:00Z")

</div>

Hi.

Maybe this can help you

> [@GUI elements attached to control no alpha?](https://forum.babylonjs.com/t/gui-elements-attached-to-control-no-alpha/5055/2):
>
> Hi @i73 You can get a corrected alpha by dividing by parent’s alpha (does not work if parent is 0) [https://www.babylonjs-playground.com/#XCPP9Y#1318](https://www.babylonjs-playground.com/#XCPP9Y#1318) Or you can separate the rectangle from the textblock, and put them in a shared container [https://www.babylonjs-playground.com/#XCPP9Y#1319](https://www.babylonjs-playground.com/#XCPP9Y#1319)

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [September 7, 2019, 10:56pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/3 "2019-09-07T22:56:56Z")

</div>

Oh sorry, didn’t see it properly. It’s not the same thing. Probably will not help you 🙂

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [September 7, 2019, 11:51pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/4 "2019-09-07T23:51:33Z")

</div>

Hi @Coolroar perhaps something along these lines may help [https://www.babylonjs-playground.com/#TMHF80#10](https://www.babylonjs-playground.com/#TMHF80#10)

---

<div class="post-metadata">

**Author:** ![Devin\_Wright](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/devin_wright/32/4302_2.png) [@Devin\_Wright](https://forum.babylonjs.com/u/Devin_Wright)\
**Post date:** [September 8, 2019, 6:04pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/5 "2019-09-08T18:04:31Z")

</div>

Interesting, seems as though Edge cannot handle 8-digit hex codes for canvas fillStyle.

[https://www.w3schools.com/code/tryit.asp?filename=G7SNGTGJ947M](https://www.w3schools.com/code/tryit.asp?filename=G7SNGTGJ947M)

Seems to default to whatever the last valid fillStyle was.

---

<div class="post-metadata">

**Author:** ![Coolroar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/coolroar/32/246_2.png) [@Coolroar](https://forum.babylonjs.com/u/Coolroar)\
**Post date:** [September 8, 2019, 9:54pm UTC](https://forum.babylonjs.com/t/drawtext-with-transparent-background/5521/6 "2019-09-08T21:54:30Z")

</div>

Hey! Thanks for _quick_ replies 🕶.

Devin\_Write: yes, interesting – spot-on demo.

JohnK: that’s it! `"transparent"` in drawText bg param instead of `"#0000"` fixes it.

👍⭐⭐👍