// Background canvas

let bgCanvas;
let fgCanvas;
let bgCtx;
let fgCtx;

function initializeCanvas() {
  initializeBackground();
  initializeForeground();
  fullscreen();
  window.addEventListener('resize', fullscreen);
}

function initializeBackground() {
  bgCanvas = document.createElement("canvas");
  mainDiv.appendChild(bgCanvas);
  bgCanvas.classList.add("fullscreen");
  bgCanvas.classList.add("background");
  bgCtx = bgCanvas.getContext("2d");
  clearCanvas(bgCanvas, bgCtx);
}

function initializeForeground() {
  fgCanvas = document.createElement("canvas");
  mainDiv.appendChild(fgCanvas);
  fgCanvas.classList.add("fullscreen");
  fgCanvas.classList.add("foreground");
  fgCtx = fgCanvas.getContext("2d");
  clearCanvas(fgCanvas, fgCtx);
}

function clearCanvas(canvas, ctx) {
  if (!canvas && !ctx) {
    clearCanvas(bgCanvas, bgCtx);
    clearCanvas(fgCanvas, fgCtx);
    return;
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (ctx === bgCtx) {
    bgCtx.fillStyle = '#ccc';
    bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
  }
}

function fullscreen() {
  const dim = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  };
  Object.assign(bgCanvas, dim);
  Object.assign(fgCanvas, dim);
}