How can I draw outlined fonts

[espruino-discuss]

Posted at 2024-01-09 by KTibow

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:

[gfwilliams]

Posted at 2024-01-09 by @gfwilliams

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 espruino/EspruinoDocs@92b3957

[espruino-discuss]

Posted at 2024-01-09 by @fanoush

There already is similar clock app called Contour Clock, it has quite a lot 'font types' so it might be an inspiration.

[espruino-discuss]

Posted at 2024-01-10 by KTibow

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)