How to layer HTML Elements for Replit Webview and Browser?

Question: How to layer Elements correct for Replit Webview
Hi, I am trying to follow a Tutorial on Youtube for Fun.
The Code can be found here:

In this tutorial a technique is used to display multiple HTML Element above a Canvas which is modified by Javascript. In the Replit Webview the layering does not work. Everything is hidden behind the Canvas. If you open the Result in another Tab the HTML Elements are visible but the layering is wrong. The background of the Healthbar is above until the health changes. I tried around with some Z-Index adjustments but had no success. I guess it is Browser dependent too.

I could create these Elements in Javascript directly inside the Canvas but i thought it is a good opportunity to learn something new about Layers in HTML and CSS.

Thanks for everyone who has an suggestion.
The Repl: