Answer

Ответ:

class Point {
  constructor(y, x) {
    this.y = y;
    this.x = x;
  }
}

class Renderer {
  points = new Set();

  #height = 10;
  #width = 10;
  #ratio = 2.3;

  #addFrame(field) {
    const fieldCopy = JSON.parse(JSON.stringify(field));

    for (const row of fieldCopy) {
      row.unshift("│");
      row.push("│");
    }

    const top = new Array(this.#width * this.#ratio + 2).fill("─");
    const bottom = new Array(this.#width * this.#ratio + 2).fill("─");
    top[0] = "┌";
    top[top.length - 1] = "┐";
    bottom[0] = "└";
    bottom[bottom.length - 1] = "┘";

    return [top, ...fieldCopy, bottom];
  }

  addPoint(point) {
    this.points.add(point);

    return this;
  }

  render() {
    const result = Array.from(Array(this.#height), () =>
      new Array(this.#width * this.#ratio).fill(" ")
    );

    for (const { y, x } of this.points) {
      result[y][Math.floor(x * this.#ratio)] = "·";
    }

    const withFrame = this.#addFrame(result);
    const strResult = withFrame.map((row) => row.join("")).join("\n");

    console.log(strResult);
  }
}

Объяснение:

Создадим 4 переменные: points - точки которые нужно рисовать, #width и #height - размеры нашего поля и #ration - отношение ширины и высоты символа в консоли (это нужно для иллюзии квадратности поля). Далее создадим метод addPoint в котором будем добавлять точку в points и возвращать this для того чтобы этот метод можно было вызывать по цепочке. Затем создадим наш основной метод - render, внутри с помощью методов массива будем создавать поле (result, матрица размерами #height * #width заполненная пробелами). После этого проходимся по точкам и рисуем их символом "·" умножая x координату на #ratio. В конце обрамляем поле рамкой с помощью символов "┌", "┐", "└", "┘", "─", "│" и манипуляций с массивами, собираем всё в строку с помощью метода join и выводим в консоль.

Код для проверки:

class Point {
  constructor(y, x) {
    this.y = y;
    this.x = x;
  }
}

class Renderer {
  points = new Set();

  #height = 10;
  #width = 10;
  #ratio = 2.3;

  #addFrame(field) {
    const fieldCopy = JSON.parse(JSON.stringify(field));

    for (const row of fieldCopy) {
      row.unshift("│");
      row.push("│");
    }

    const top = new Array(this.#width * this.#ratio + 2).fill("─");
    const bottom = new Array(this.#width * this.#ratio + 2).fill("─");
    top[0] = "┌";
    top[top.length - 1] = "┐";
    bottom[0] = "└";
    bottom[bottom.length - 1] = "┘";

    return [top, ...fieldCopy, bottom];
  }

  addPoint(point) {
    this.points.add(point);

    return this;
  }

  render() {
    const result = Array.from(Array(this.#height), () =>
      new Array(this.#width * this.#ratio).fill(" ")
    );

    for (const { y, x } of this.points) {
      result[y][Math.floor(x * this.#ratio)] = "·";
    }

    const withFrame = this.#addFrame(result);
    const strResult = withFrame.map((row) => row.join("")).join("\n");

    console.log(strResult);
  }
}

const renderer = new Renderer();

// first square
renderer.addPoint(new Point(0, 0)).addPoint(new Point(2, 0))
  .addPoint(new Point(0, 2)).addPoint(new Point(2, 2));

// second square
renderer.addPoint(new Point(8, 8)).addPoint(new Point(9, 8))
  .addPoint(new Point(8, 9)).addPoint(new Point(9, 9));

// triangle
renderer.addPoint(new Point(4, 5)).addPoint(new Point(5, 6)).addPoint(new Point(5, 4));

renderer.render();