Transparency in fonts?

I made this clock with overlapping digits. The digits are first drawn in foreground color, then in a lighter font in background color. Is there an easier way to do this? I tried "hollowing out" the characters, but then the insides just get treated as transparent. Is there a way to tell the Graphics library which parts of a font are transparent?

1 Attachment

Hi! I'm afraid the fonts are basically just 1 bit. You can do 2/4 bit (for antialiasing) but it then becomes a nightmare trying to create the font in the first place.

For this kind of thing probably your best option is to create 10 images for the numbers 0..9 - you can then have transparency and different colors for each.

I just replied in http://forum.espruino.com/conversations/371038/#comment16334287 but just a note that if you don't need it to be fast, you can use a s normal font and then render it 'jittered' either side of where you want:

var txt = "Hello";
var x=10, y=10;
g.setFontVector(60).setColor("#fff");
g.drawString(txt,x-4,y).drawString(txt,x+4,y);
g.drawString(txt,x,y-4).drawString(txt,x,y+4);
g.drawString(txt,x-3,y-3).drawString(txt,x-3,y+3);
g.drawString(txt,x+3,y-3).drawString(txt,x+3,y+3);
g.setColor("#000");
g.drawString(txt,x,y);

I seem to remember we do this for one or two clock faces. If it's once a minute it's no big deal but you wouldn't want to be drawing like that every second.