JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainDiv" class='mainDiv'>

</div>

CSS

.mainDiv {
  /* position: absolute; */
width: 200px;
height: 200px;
background:cyan;
border-radius: 50%;

}

#myCanvas{
 position: /* absolute */;
 width:200px;
 height:200px;
 background:green;

}

JavaScript

var c = document.createElement("canvas");

c.id ="myCanvas";


var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();


maindiv = document.getElementById('mainDiv');
maindiv.appendChild(c);