New to Bangle.js and Espruino. Need help with graphics

Thank you very much! I shall definitely go through the link for UI code you shared.
For my example, I decided that I will use the circle to show the progress.
To give you an idea, posting an image of my attempt.
I used 2 circles here, outer circle (filled with red) and inner circle(filled with black), which eventually shows me the circle with a red border.
Now, I need to fill the red circle with green color depending on the number of steps taken. In my case, a quarter of a circle.
Is my understanding correct - I need to set color for each pixel that comes inside the border?
if yes, how do I do this?

And this following qn. is out of my personal curiosity to know if I am the only one who is finding this a little difficult to code=> I have worked in Javascript and web technologies earlier and I find this coding very different from what I worked on. Is it because that's HTML and web browser that I was working on and here I need to do things differently because its a smart watch?. Even getting a simple icon on the face of the watch is so different. I tried using fonts too, however they didn't work and I didn't find any proper info on how to make them work. It kept saying that it didn't find this font, but I have no clue as to which module needs to be added. I don't have the bangle device and am using the emulator. Setting fonts otherwise in normal Javascript is so easy.

Thanks a lot once again for answering my questions.