Function drawBorder

source/draw.js:10–104

(context, screen)

// For higher-level drawing functions, go to 'colour.js'
export const SCREEN_BORDER_WIDTH = 2;
export const drawBorder = (context, screen) => {
  const { colour, corners } = screen;
  //   fillBackground(context, { colour: Colour.Black, corners });

  const canvasCornerPositions = getCanvasPositions(context, corners);
  const [a, b, c, d] = canvasCornerPositions;

  let { depth } = screen;

  //   console.log(depth);
  const overflow = depth - 500;
  if (overflow > 0) {
    const alpha = 1 - overflow / 500;
    if (alpha < 0.01) return;
    context.globalAlpha = 1 - overflow / 500;
  }
  // if (context.globalAlpha <= 0.1) return;
  context.beginPath();
  context.moveTo(...a);
  context.lineTo(...b);
  context.lineTo(...d);
  context.lineTo(...c);
  context.closePath();

  // context.fillStyle = "#232940aa";
  context.fillStyle = "#232940";
  context.fill();

  context.lineWidth = SCREEN_BORDER_WIDTH;
  context.strokeStyle = colour.hex;
  // context.strokeStyle = "#232940aa";
  context.stroke();

  if (screen.parent) {
    // const canvasParentPositions = getCanvasPositions(
    //   context,
    //   screen.parent.corners
    // );
    // const [pa] = canvasParentPositions;
    // context.beginPath();
    // context.moveTo(...pa);
    // context.lineTo(...a);
    // context.closePath();
    // context.lineWidth = SCREEN_BORDER_WIDTH;
    // context.strokeStyle = "white";
    // context.stroke();
  }

  if (window.debugCorners) {
    context.fillStyle = "#ffffff99";
    context.font = `${30 / devicePixelRatio}px Arial`;
    context.fillText(
      `${corners[0][0].toFixed(2)}, ${corners[0][1].toFixed(2)}`,
      a[0] + 10 / devicePixelRatio,
      a[1] - 10 / devicePixelRatio
    );

    context.fillText(