JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"><canvas id="canvas" width="200" height="200"></canvas></div>

CSS

#wrapper{
			position:absolute;
			top:0px;	
			left:0px;
			width:200px;
			height:200px;
			background:green;
		}
		
		#canvas {
			display: block;
		}

JavaScript

var canvas = document.getElementById('canvas');
				var ctx = canvas.getContext('2d');
				var circ = Math.PI * 2;
				var quart = Math.PI / 2;
				
				var w = 200;
				var h = 200;
				var strokeSize = 40; 
				var radius = 100;
				
				function drawShape(percent){
					  ctx.beginPath();      
					  ctx.arc(w/2, h/2,radius-strokeSize/2,-(quart),((circ) * percent) - quart,false);
					  ctx.strokeStyle = "#3B5DBA";
					  ctx.lineCap = 'butt';
					  ctx.lineWidth = strokeSize;
					  ctx.stroke();
				}
				
				drawShape(1);