JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>

JavaScript

//coordinates of rectangle
  var xp = 125;
  var yp = 125;
  var radius = 45;  
  
  //How far to move the arc each time:
  var angleStep = Math.PI * 0.1;
  //How often to move the arc:
  var stepTime = 50;
	var currentStep = 0;

function doDraw() {
	var can = document.getElementById("myCanvas");
  can.width = 250;
  can.height = 250;
  var context = can.getContext("2d");
  
  //Erase the canvas by painting it blue:
  context.fillStyle="#0000FF";
  context.fillRect(0, 0, 250, 250);
  
  //Set the drawing color to white:
  context.strokeStyle="#FFFFFF";
  context.lineWidth=5;
  context.arc(xp, yp, radius, 0 + currentStep, 1.5*Math.PI + currentStep);
  context.stroke();
  
  //Make sure to maintain the currentStep angle so it doesn't overflow:
  currentStep = currentStep + angleStep;
  if (currentStep>Math.PI * 2) {
  	currentStep = currentStep - Math.PI * 2;
  }
  
  //Wait, and then call this function again to animate:
  setTimeout(function() {
  	doDraw();
  }, stepTime);
	
}
    
doDraw();