How can I draw outlined fonts

Posted on
  • I want to draw a Pixel-style clock on my Bangle. I have the font. But on Pixels, each number has an outline. I'm not sure how to do that with the Espruino graphics library. Is that even possible? If not, any recommendations on how I can generate a font that appears to be outlined?
    Image for context:

  • There isn't anything built-in, but there are a few options...

    • Just have a normal font, and render it a few pixels top left, top right, bottom left, bottom right in the background colour. Maybe a bit slower but it's simple, and it's what I've done on some other clocks (I forget which one now)
    • Have two fonts, one big, one small - and then render the big one in the background colour, one character at a time and centered
    • Store the font as an image with the background in. Since you're only doing numbers that's not going to be such a big deal. You can even store the 10 number image as 'frames' in one image rather than needing 10 separate images. I realised this wasn't documented yet, so added it in­/commit/92b3957918b70182447f23536b6826fc­6261e59b
  • There already is similar clock app called Contour Clock, it has quite a lot 'font types' so it might be an inspiration.

  • While doing it with images would be the "right" way, I just did it with rendering around. It looks pretty alright. (Note that it looks more desaturated IRL)

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

How can I draw outlined fonts

Posted by Avatar for KTibow @KTibow