JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <canvas width="400" height="300"></canvas>
</div>

CSS

div {
  background-color:grey;
  width:40vw;
  height:30vw;
}
canvas {
  border:1px solid red;
  width:100%;
  height:100%;
}

JavaScript

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