JSFiddle - React, Tailwind, and code Playground

HTML

<header>
</header>
<main>
	<canvas id="stage"></canvas>
</main>

CSS

html,body{
			margin:0;
			width:100%;
			height:100%;
		}
		body{
			display:flex;
			flex-direction:column;
		}
header{
			width:100%;
			height:40px;
			background-color:red;
		}
		main{
			display:flex;
			flex: 1 1 auto;
			border: 1px solid blue;
			width:80vw;
		}
		canvas{
			/*flex: 1 1 auto;*/
			background-color:black;
		}

JavaScript

var canvas = $("#stage")[0];
var ctx = canvas.getContext("2d");

draw();

function draw() {
    setCanvasSize(ctx.canvas);
    ctx.strokeStyle="#FFFFFF";
    ctx.beginPath();
    ctx.arc(100,100,50,0,2*Math.PI);
    ctx.stroke();
}

$(window).on("resize", draw);

function setCanvasSize(canvas) {
  var rect = canvas.parentNode.getBoundingClientRect();
  canvas.width = rect.width;
  canvas.height = rect.height;
}