How to draw an outline around a text



I’m trying to add a white outline around a line of text so that it can be read on any background colour.
I’ve tried different strategies: draw the text twice with different font sizes, drawFitted twice to different bounding boxes, and apply affine transforms but I’m not really satisfied with the output.

Is there a nicer way of doing this?


Convert the text to Path, stroke the path with 2px white, then fill the Path with your text color.


You could also draw the text to an image and apply a white DropShadowEffect.


For a completely different approach, if you’re ok with drawing the background into an Image and then performing your own compositing operations, have a look at this Graphics Gem:

XOR Drawing With Guaranteed Contrast (


I did what you suggested and the result is good enough for me. I knew I could count on you :wink:
Something like that:

juce::Path textPath;
juce::GlyphArrangement glyphs;
glyphs.addFittedText( font, getName(), x, y, w, h, juce::Justification::centred, 2);

g.setColour (juce::Colours::white);
juce::PathStrokeType strokeType(2.5f);
g.strokePath(textPath, strokeType);
g.setColour (juce::Colours::black);

I mean, it doesn’t look as good a I expected, but it’s ok. I’ll have a look at your XOR suggestion when I have some time :slight_smile: