const starback = new Starback("#canvas", {
  width: document.body.clientWidth,
  height: document.body.clientHeight,
  type: 'dot',
  quantity: 100,
  direction: 225,
  backgroundColor: ['#0e1118', '#232b3e'],
  randomOpacity: true,
});
const mountain = new Image();
mountain.src = 'img/mountain2.png';
mountain.onload = () => {
  starback.addToFront((ctx) => {
    ctx.drawImage(
      mountain,
      0,
      0,
      mountain.width,
      mountain.height,
      0,
      canvas.height - mountain.height,
      canvas.width,
      mountain.height
    );
  });
}

function resizeCanvas() {
  const canvas = document.getElementById("canvas");
  canvas.setAttribute("width", window.innerWidth);
  canvas.setAttribute("height", window.innerHeight);
}

function onLoadDoc() {
  resizeCanvas();
  const elements = document.getElementsByClassName("nav-link");
  for (const el of elements) {
    el.onclick = onNavLinkClick;
  }
}

function onNavLinkClick() {
  const collapse = document.getElementsByClassName('navbar-collapse');
  if (collapse[0] != null)
    collapse[0].classList.remove('show');
}

window.addEventListener("resize", resizeCanvas);
window.addEventListener("load", onLoadDoc);
