I would like to re-create CyberStrike's HP/Shield/Energy HUD indicator in HTML5. 

The HUD indicator an oval shape with lots of inner segments which display different data to the player. The segmented inner circle shows health on front, rear, left and right. The segmented circle around that shows shields on all four sides. The oval slices on the left show stamina and energy. The oval slices on the right show nearby faction energy tower levels.

The game I'm making uses RogueEngine, which means it's written in TypeScript and exports to HTML. For a UI, I have available anything that can be rendered in a web page. HTML, CSS, TS/Javascript, SVG, and maybe canvas? Not sure on that last one because I haven't tried it.

The problem is I have no idea how to approach this. I imagine I need some sort of math to draw oval lines, but I don't know what math that would be. And it needs to be something that can be programmatically changed using javascript as the player takes damage or does things that would influence the values controlling the HUD. And then of course there's the issue of the segments. How on earth do I create a those complex shaped segments?

I'm really struggling here, but I've made some progress. Still missing a lot of display and function but here's what it looks like so far.

https://codepen.io/insanity54/pen/wBvxadG

I ended up using javascript to create 3 separate canvases, then composite them together to get the mask effect I'm looking for. I used tweakpane to get a GUI for testing out parameters.

I can't help but think I'm doing something wrong, though. It feels like I'm missing something that would make this a whole lot easier, but I don't know what that is. Better understanding of trigonometry, maybe? Better code structure? I'm 16 hours into this thing and I feel so dumb.

Often artists just draw mask layers, it's easier than programmers trying to match curves and complex shapes with complicated math. Stencil masks work great, and can slide into place easily. 

What you are doing can work, and for some designs and shapes is the easiest approach. It looks like you have made good progress with it.