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

//拡大
let scaleUpW = 50;
let scaleUpH = 50;
function scaleUp() {
  ctx.clearRect(0, 0, canvasW, canvasH);
  scaleUpW++;
  scaleUpH++;
  if (scaleUpW > 300) {//幅300pxを超えたら初期値へリセット
    scaleUpW = 50;
    scaleUpH = 50;
  }
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, scaleUpW, scaleUpH);
  ctx.closePath();
  requestAnimationFrame(scaleUp);
}
scaleUp();

//縮小
let scaleDownW =300;
let scaleDownH = 300;
function scaleDown() {
  ctx.clearRect(350, 0, canvasW, canvasH);
  scaleDownW--;
  scaleDownH--;
  if (scaleDownW < 50) {//幅50より小さくなったら初期値へリセット
    scaleDownW = 300;
    scaleDownH = 300;
  }
  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.fillRect(450,50, scaleDownW,scaleDownH);
  ctx.closePath();
  requestAnimationFrame(scaleDown);
}
scaleDown();