HTML element on top of canvas

Question

Is it possible to put an HTML element (div, svg, p...) onto a canvas, so it will be placed on the canvas?
How should I put it in the code? like this?
<canvas ..>
<my element/>
</canvas>
How should I style them (the position - absolute/relative)?
Will I need z-index property?
Thanks for help.

Answer 1

Explanation for how to in this code (run it to read, don't try to read only the code itself ;)):
https://code.sololearn.com/WhJZx6lGy476/?ref=app

(better understandable, more visual, and cannot overflow the answer/post character limit^^)

Answer 2

Visually no need to put them as child of canvas. Just
<canvas class="main" ></canvas>
<div id="other element" class="main">
<child1></child1>
<child2></child2>
</div>
.main{position absolute;top:left:}
The zIndex is handled because your DOM after canvas so they are on top.
The parent div is in case you want to toggle show hide of every thing visually on canvas
And yes position absolute for the childs