JSFiddle - React, Tailwind, and code Playground

HTML

<canvas  id="myCanvas" height="100", width="100"></canvas>
		
		<script>

			  var canvas = document.getElementById('myCanvas');
			  var context = canvas.getContext('2d');
			  var centerX = canvas.width / 2;
			  var centerY = canvas.height / 2;
			  var radius = 30;

			  context.beginPath();
			  context.arc(centerX,centerY, radius, 0, 2 * Math.PI);
			  context.fillStyle = 'blue';
			  context.fill();
		</script>

CSS

#myCanvas {
	border:2px solid;
	display:inline-block;

}