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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth * devicePixelRatio;
canvas.height = window.innerHeight * devicePixelRatio;

const canvasW = canvas.width;
const canvasH = canvas.height;
const myNumber = 200; //推移させたい数値の最大値(絶対値)
const division = 1000; //Date.nowをそのまま使うと周期が早すぎるので、希望の数値で割る
const digit = 3; //表示したい小数点以降の桁数
const startTime = Date.now() / division; //アニメーション開始時間
let elapsedTime = 0; //アニメーション開始時間からの経過時間を格納
let x = 300;//x座標の初期値を設定(移動させたい範囲の中央)
let y = 300;//y座標の初期値を設定(移動させたい範囲の中央)
function circularMotion() {
  elapsedTime = Date.now() / division - startTime; //開始時間-関数内で現在時間を引けば経過時間が得られる
  const periodX = Math.sin(elapsedTime).toFixed(digit) * myNumber;//-200 〜 +200の間を推移
  const periodY = Math.cos(elapsedTime).toFixed(digit) * myNumber;
  ctx.clearRect(0, 0, canvasW, canvasH);
  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.arc(325, 325, 200, 0, Math.PI * 2);//便宜上円を描画
  ctx.stroke();//便宜上円を描画
  ctx.fillRect(x + periodX, y + periodY, 50, 50);//
  requestAnimationFrame(circularMotion);
}
circularMotion();