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 parent = canvas.parentNode,
        styles = getComputedStyle(parent),
        w = parseInt(styles.getPropertyValue("width"), 10),
        h = parseInt(styles.getPropertyValue("height"), 10);

    canvas.width = w;
    canvas.height = h;
}