writeTextToCanvas() background longer than rendered text

[AnonymousSausage77]

I am trying to draw text to a label and rotate it. I also want to give the rotated text a background. I found this function:
Cesium.writeTextToCanvas() which does this, except it always appends whitespace to the beginning of the word leaving an ugly 'padding'. In the sandcastle, I have illustrated this behaviour by creating two examples, one with a single character '3' and a longer word, both with this whitespace appended.

What I would expect to happen: I expect that the background (in the sandcastle, rendered as blue) would be the same length as the word that you enter and not any longer/shorter.

Sandcastle example:
https://sandcastle.cesium.com/#c=xZRdb5swFIb/yhE3JRIxEJIpydJoWxZpF50qLbQ3pRcOnASrxka2SZZW+e8zkI8q7aRdTBsIYx/O+9rnsUUqhTawYbhFBdcgcAsz1KwqyH0TcxMnbcYzKQxlAlXidD4mIhGthqAwzDDUhGaZ+5IIgPoppbZRKcZHtxlVxvaoiMhKyeIrrhWi/qwU3X1Dts6Ndh9qYX2F0ZB8CINwFHkA3ahPRr1w1Ot50AvgsfMQPHpt5pJxvpRUZWN4OWpZQdd4mnWrmMEYf5pYzqjYUG3LiRLHO+cDrGxhY0icsF8auLotUcCCCn3lgbavrkbFVlZyFixp+rRWshLZTHKpziXWI/Ll5m5+St53Tl0lDW2J9AdNcG/b/T9BGfTfogz/Bsp4bs9OPF/EF83/JhwGl4Tr2/dhgQZMjpDSAhVtjv2JfhsjK76LZUs/Q22YoH8A3205D70D4+HAg0EQtGuTitmdPdgcsORIMybWJ9vv1OTEyB82apG4Vgl2uXOqjQdCKpN7UJWvnVqbkpk0/51JNwqOcJTkfAwBCRosDRXHcyba7DhOj/w+saK0U0GluEuIb7AoObXF+ssqfUJDUq1rmHXqxH8tnWRsAyy7fudXASmnWtsvq4rzBXvGxJlOfJv/RsplQ+R2g4rTXZ2Wh9ObNkgImfh2+L7SSMmXVF04/wI

Browser: Chrome Version 120.0.6099.109 (Official Build) (arm64)

Operating System: MacOS Ventura 13.4 (22F66)

[AnonymousSausage77]

I have just made a breakthrough.
It seems to be related to the font I am using. The length of the label is being wrongly calculated for the given font.
What's interesting is if you use empty text to fill the label, it still appends the 'padding' to the label's length regardless. I suspect it still stands as a bug, but one that can be avoided by using a different font.

I'm guessing its the " 'Open sans' " because "impact" works.

Edit: I was wrong. impact causes this issue as well. If you remove the font property, the issue goes away. But if you add a font, such as "20pt impact", it correctly styles the label using the target font, but the padding rears it's ugly head. It seems to only space correctly if you use "sans-serif" (the default) so I am guessing the label length was designed around that. Perhaps there should be a way for us to override the size of the label if it is not possible to account for every font-size automatically.

[Saicbmm]

I understand that your writeTextToCanvas() method is faulty. The blue background is too big for your text. Implementing this using HTML and CSS, the label could be created by using the tag around the text to highlight it. Then, using CSS, style the to highlight the text in blue. This way, there should not be any extra space in the background. I believe this methodology can be used in your program.

Thanks

[ggetz]

Thanks for the report! I'm marking this as a duplicate of #9767. We'll likely want to replace writeTextToCanvas with the newer, built-in version.