JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
	<!-- Header -->
	<div id="headerPanel">
		Text
	</div>
 
	<div id="canvasPanel">
		<canvas id="canvas" resize></canvas>
	</div>

CSS

body {
	margin: 0;
}

#headerPanel {
	border-bottom: 1px solid black;
	width: 100%;
	height: 50px;
}

#canvasPanel {
  position: absolute;
	width:100%;
  top:50px;
	bottom:0;
}

#canvas {
	width: 100%;
	height: 100%;
}

JavaScript

canvasElem = $('#canvas').get(0);
	paper.setup(canvasElem);

	var offset = $('#canvasPanel').offset();
	var width = $('#canvasPanel').width();
	var height = $('#canvasPanel').height();

	var centerX = offset.left + width / 2;
	var centerY = offset.top + height / 2;
	
	// The radius is the smaller of the width/height divided by 2
	var radius = Math.min(width,height) / 2;

	var circle = new paper.Path.Circle(new paper.Point(centerX,centerY), radius);
	circle.fillColor = 'white';
	circle.strokeColor = 'black';
	paper.view.draw();