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

window.addEventListener('load', function () {
  translateAnime();//右方向移動のアニメーション
  rotationAnime();//円周運動のアニメーション
})

//右方向移動
function translateAnime() {
  let x = 100;
  function translate() {
    x++;
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.beginPath();
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 100, 100,100);
    ctx.fill();
    requestAnimationFrame(translate);
  }
  translate();
}

//円周運動
function rotationAnime() {
  const num = 200 + 1;
  let startTime = Date.now();
  let elapsedTime = 0;
  let x, y;
  function rotation() {
    elapsedTime = (Date.now() - startTime)/3;
    const periodX = Math.sin(elapsedTime / num) * num;
    const periodY = Math.cos(elapsedTime / num) * num;
    x = periodX + 500;
    y = periodY + 200;
    ctx.clearRect(0, 0, canvasW, canvasH);
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, y, 50, 50);
    ctx.fill();
    requestAnimationFrame(rotation);
  }
  rotation();
}