Yeah that should really work, when you look at the developer tools of the page where is the div being drawn? Is it behind the canvas?
Alternatively is this is some kind of weird source ordering thing, you can use flexbox's flex-order property to make divs display in a different order to how they're written:
https://www.w3schools.com/cssref/css3_pr_order.asp
For example, some CSS like the following:
#container{
display:flex;
}
#yourDiv {
order:2
}
#c2canvasdiv {
order:1
}[/code:vmk1fs7z]
Should do the trick; please note you'll have to wrap them in a parent div.
So the HTML will be roughly:
[code:vmk1fs7z]<div id="container">
<div id="yourDiv"></div>
<div id="c2canvasdiv"></div>
</div>[/code:vmk1fs7z]
If this works, then the following is a shorter rule for the same effect in this exact situation:
[code:vmk1fs7z]#container{
display:flex;
flex-direction: column-reverse;
}[/code:vmk1fs7z]