# How to draw an outline around a text

**URL:** <https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152>\
**Category:** General JUCE discussion\
**Created:** [February 18, 2012, 5:39pm UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152 "2012-02-18T17:39:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dri](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dri/32/142_2.png) [@Dri](https://forum.juce.com/u/Dri)\
**Post date:** [February 18, 2012, 5:39pm UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152/1 "2012-02-18T17:39:03Z")

</div>

Hi,

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?

---

<div class="post-metadata">

**Author:** ![TheVinn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/thevinn/32/806_2.png) [@TheVinn](https://forum.juce.com/u/TheVinn)\
**Post date:** [February 18, 2012, 7:25pm UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152/2 "2012-02-18T19:25:49Z")

</div>

> [@Dri](#):
>
> I’m trying to add a white outline around a line of text so that it can be read on any background colour…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.

---

<div class="post-metadata">

**Author:** ![daven](https://avatars.discourse-cdn.com/v4/letter/d/59ef9b/32.png) [@daven](https://forum.juce.com/u/daven)\
**Post date:** [February 19, 2012, 1:42am UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152/3 "2012-02-19T01:42:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheVinn](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/thevinn/32/806_2.png) [@TheVinn](https://forum.juce.com/u/TheVinn)\
**Post date:** [February 19, 2012, 1:50am UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152/4 "2012-02-19T01:50:27Z")

</div>

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](http://books.google.com/books?id=CCqzMm_-WucC&pg=PA411&lpg=PA411&dq=xor+drawing+with+guaranteed+contrast&source=bl&ots=mshz32LFhj&sig=sDDCpoAFOaKtVeDTg3BMrYqFtok&hl=en&sa=X&ei=L1VAT8yPJOLXiQK72tHRAQ&ved=0CCsQ6AEwAQ#v=onepage&q=xor%20drawing%20with%20guaranteed%20contrast&f=false) ([books.google.com](http://books.google.com))

---

<div class="post-metadata">

**Author:** ![Dri](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dri/32/142_2.png) [@Dri](https://forum.juce.com/u/Dri)\
**Post date:** [February 19, 2012, 2:06am UTC](https://forum.juce.com/t/how-to-draw-an-outline-around-a-text/8152/5 "2012-02-19T02:06:16Z")

</div>

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

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

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

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 🙂