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);

canvas.addEventListener('click', function(e){
    var x = e.pageX - canvas.offsetLeft - w/2,
        y = e.pageY - canvas.offsetTop - h/2,
        mAngle = Math.atan2(y, x);
    
    if (mAngle > -1 * Math.PI && mAngle < -0.5 * Math.PI) {
        mAngle = 2 * Math.PI + mAngle;
    }
    
    var percentage = (mAngle + Math.PI / 2) / 2 * Math.PI * 10;
    
    ctx.clearRect(0, 0, w, h);
    drawShape(percentage/100);
});