HTML5 Canvas로 밤하늘 그리기

const width = window.innerWidth,
  height = window.innerHeight,
  stars = createStars(width, height, 30),
  moon = {
    x: 0,
    y: height / 2,
    r: 45
  },
  canvas = document.getElementById("nightsky"),
  ctx = canvas.getContext("2d");
let counter = 0,
  time = 0;
 
function random(max) {
  return Math.floor(Math.random() * max);
}
 
function createStars(width, height, spacing) {
  const stars = [];
 
  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x + random(spacing),
        y: y + random(spacing),
        r: Math.random() * 1.5
      };
      stars.push(star);
    }
  }
  return stars;
}
 
function fillCircle(ctx, x, y, r, fillStyle) {
  ctx.beginPath(),
  ctx.fillStyle = fillStyle,
  ctx.arc(x, y, r, 0, Math.PI * 2),
  ctx.fill();
}
 
function getOpacity(factor) {
  const opacityIncrement = 0.6 * Math.abs(Math.sin(factor)),
    opacity = 0.1 + opacityIncrement;
  return opacity;
}
 
function render() {
  const gradient = ctx.createLinearGradient(0, 0, 0, height);
  let newX = time / 10 - 45;
  gradient.addColorStop(0, "#00111e");
  gradient.addColorStop(1, "#0a2342");
  //배경 그래디언트
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function (star, i) {
    const factor = counter * i,
        x = star.x,
        y = star.y,
        opacity = getOpacity(factor),
        randomColor = Math.floor((Math.random()*360)+1);
 
    fillCircle(ctx, x, y, star.r, `hsla(${randomColor}, 30%, 80%, ${opacity})`); //별 그리기
  });
 
  newX <= width + 90 // window 너비에 달 지름 추가
  ? (
    moon.x = newX,
    moon.y = newY(newX),
    time += 5
  ) : time = 0,
  // 달에 애니메이션 추가
 
  fillCircle(ctx, moon.x, moon.y, moon.r, "#f5f3ce"); // 달 그리기
 
  counter++;
  requestAnimationFrame(render);
}
 
function newY(x) {
  return Math.pow(x - width / 2, 2) / 9000 + height / 2 + 1
}
 
canvas.width = width,
canvas.height = height,
render();