Need help with my first watch face

Wow, that looks really cool! You can run it in the emulator using this link: https://www.espruino.com/ide/emulator.ht­ml?codeurl=https://raw.githubusercontent­.com/chili-666/BangleApps/master/apps/bl­uesec/bluesec.js

this small clock is in front of the hour/minute hands

That's a hard one. What I'd suggest is to draw it to an offscreen buffer, and then draw the hour/minute hands over that...

So create a new graphics with:

var gs = Graphics.createArrayBuffer(54,54,16);

Then draw on gs rather than g with drawSecondFace/Hand

Then draw the minute and hour hands to gs as well - you'll have to offset them so everything lines up ok.

Finally render that to the screen using g.drawImage({width:54,height:54,bpp:16,b­uffer:gs.buffer}, ox,oy)

Ideally you could use 8 bits per pixel instead of 16 too. It might work, but it's possible the colours will be a bit 'off'.

Secondly the widget area doesn't work properly

That's because you're clearing the whole screen with g.clear(); every minute. The easiest method is just not to clear the widget area - do g.clearRect(0,24,239,239) instead.

Note that some widgets use the bottom 24px as well, but if you don't have any of those installed then I guess you could ignore that