JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=600 height=300></canvas><br>

JavaScript

var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	
	var cw=canvas.width;
	var ch=canvas.height;
	var cx=50;
	var cy=50;
	var radius=35;
	var PI2=Math.PI*2;
	
	function linha() {
		ctx.beginPath();
		ctx.strokeStyle = 'rgb(0,0,0)';
		ctx.lineWidth = 2;
		ctx.moveTo(0,50);
		ctx.lineTo(600,50);
		ctx.stroke();
		ctx.restore();	
	}
	
	function draw(){
		
		ctx.save();
		ctx.beginPath();
		ctx.strokeStyle = 'rgba(0,0,0,0)';
		ctx.arc(cx,cy,radius,0,PI2);
		ctx.closePath();
		ctx.stroke();
		ctx.clip();
		linha();
		ctx.restore();
		
	}
	
	var timer = null;
	
	function animate(){
		requestAnimationFrame(animate);
		cx+=1;
		draw();		
	}
	
	document.getElementById("canvas").onclick = function(){
			animate();
	}