modules
  helpers
    convert.js
  shapes
    circle.js
    square.js
    triangle.js
  canvas.js
index.html
main.js
main.css

<div>
  <section>
    <h3>Circle</h3>
    <label>
      X:
      <input type="number" value="75" data-prop="x" />
    </label>
    <label>
      Y:
      <input type="number" value="75" data-prop="y" />
    </label>
    <label>
      Radius:
      <input type="number" value="50" data-prop="radius" />
    </label>
    <label>
      Color:
      <input type="color" value="#ff0000" data-prop="color" />
    </label>
    <button data-btn="circle" class="draw_btn">Draw</button>
  </section>
  <section>
    <h3>Square</h3>
    <label>
      X:
      <input type="number" value="275" data-prop="x" />
    </label>
    <label>
      Y:
      <input type="number" value="175" data-prop="y" />
    </label>
    <label>
      Length:
      <input type="number" value="100" data-prop="length" />
    </label>
    <label>
      Color:
      <input type="color" value="#00ff00" data-prop="color" />
    </label>
    <button data-btn="square" class="draw_btn">Draw</button>
  </section>
  <section>
    <h3>Triangle</h3>
    <label>
      X:
      <input type="number" value="150" data-prop="x" />
    </label>
    <label>
      Y:
      <input type="number" value="100" data-prop="y" />
    </label>
    <label>
      Length:
      <input type="number" value="125" data-prop="length" />
    </label>
    <label>
      Color:
      <input type="color" value="#0000ff" data-prop="color" />
    </label>
    <button data-btn="triangle" class="draw_btn">Draw</button>
  </section>
</div>
<button>Clear Canvas</button>
<script src="main.js" type="module"></script>

body {
  max-width: 768px;
  margin: 0 auto;
  color: #222;
  text-align: center;
}
canvas {
  display: block;
  margin: 1rem auto;
  border: 1px dashed #222;
  border-radius: 4px;
}
div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
section {
  padding: 1rem;
}
label {
  display: block;
}
input {
  margin: 0.25rem 0;
}
input:not([type="color"]) {
  width: 50px;
}
button {
  margin: 0.25rem auto;
  cursor: pointer;
}
ul {
  list-style: none;
}
li {
  margin: 0.5rem auto;
  width: 320px;
  border-bottom: 1px dotted #222;
}
p {
  margin: 0.25rem 0;
}

// export default указывает на экспорт модуля по умолчанию
// данная инструкция может быть указана либо перед объявлением класса или функции, включая IIFE (но не выражения класса, переменной или функционального выражения)
// либо в конце, т.е. сначала class ClassName..., затем export default ClassName
export default class Canvas {
  // конструктор класса принимает три параметра: родительский элемент, ширину и высоту
  constructor(parent, width, height) {
    this.parent = parent;
    this.width = width;
    this.height = height;
    // контекст для рисования
    this.ctx = null;
    // список для сообщений
    this.listEl = null;
    // функция очистки холста должна быть привязана к экземпляру, поскольку будет вызываться из обработчика нажатия кнопки в стрелочной функции
    this.clearCanvas = this.clearCanvas.bind(this);
  }
  // метод создания и рендеринга холста
  createCanvas() {
    // если контекст для рисования уже существует
    // в принципе, мы могли бы обойтись без этой проверки
    // поскольку будем автоматически создавать холст только один раз
    if (this.ctx !== null) {
      console.log("Canvas already created!");
      return;
    } else {
      // создаем элемент "canvas"
      const canvasEl = document.createElement("canvas");
      // ширина и высота холста должны быть указаны в атрибутах
      // указание их в свойствах может привести к проблемам
      canvasEl.setAttribute("width", this.width);
      canvasEl.setAttribute("height", this.height);
      // добавляем холст в родительский элемент
      this.parent.append(canvasEl);
      // получаем двумерный контекст для рисования
      this.ctx = canvasEl.getContext("2d");
    }
    // возвращаем экземпляр для обеспечения возможности использования цепочки вызовов методов класса
    return this;
  }
  // функция создания списка для сообщений
  // без этой проверки мы также могли бы обойтись
  createReportList() {
    if (this.listEl !== null) {
      console.log("Report list already created!");
      return;
    } else {
      const listEl = document.createElement("ul");
      this.parent.append(listEl);
      this.listEl = listEl;
    }
    return this;
  }
  // функция очистки холста и списка для сообщений
  clearCanvas() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.listEl.innerHTML = "";
  }
}

// именованный экспорт
export const convert = (degrees) => (degrees * Math.PI) / 180;

// именованный импорт вспомогательной функции
// использование фигурных скобок является обязательным
// здесь мы имеем дело с деструктуризацией - импортируемая сущность является свойством объекта "Module"
import { convert } from "../helpers/convert.js";
// именованный экспорт
// здесь мы могли бы использовать и экспорт по умолчанию
export class Circle {
  // конструктор принимает объект с "настройками" фигуры
  // посредством деструктуризации получаем необходимые свойства
  // обратите внимание на то, что конструктор принимает "глобальные" переменные ctx и listEl
  constructor({ ctx, listEl, radius, x, y, color }) {
    this.ctx = ctx;
    this.listEl = listEl;
    this.radius = radius;
    this.x = x;
    this.y = y;
    this.color = color;
    // название фигуры
    this.name = "Circle";
    // элемент для сообщения
    this.listItemEl = document.createElement("li");
  }
  // метод для рисования фигуры
  draw() {
    // устанавливаем цвет заливки
    this.ctx.fillStyle = this.color;
    // начинаем рисовать
    this.ctx.beginPath();
    // метод arc принимает 6 параметров:
    // начальная координата по оси "x", начальная координата по оси "y", радиус, начальный угол, конечный угол
    // (без вспомогательной функции это выглядит как "0, 2 * Math.PI")
    // необязательное логическое значение, определяющее направление рисования круга: по часовой стрелке или против
    this.ctx.arc(this.x, this.y, this.radius, convert(0), convert(360));
    // выполняем заливку
    this.ctx.fill();
  }
  // функция вывода сообщения о площади и периметре фигуры
  report() {
    // площадь
    this.listItemEl.innerHTML = `<p>${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.</p>`;
    // периметр
    this.listItemEl.innerHTML += `<p>${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.</p>`;
    this.listEl.append(this.listItemEl);
  }
}

// импорт по умолчанию
// обратите внимание на отсутствие фигурных скобок
import Canvas from "./modules/canvas.js";
// создаем экземпляр класса, вызываем его методы создания холста и списка для сообщений
// и сразу извлекаем необходимые переменные:
// контекст для рисования, список для сообщений и функцию очистки холста
const { ctx, listEl, clearCanvas } = new Canvas(document.body, 400, 300).createCanvas().createReportList();
// делегируем обработку события "клик" документу
// обратите внимание на то, что функция обработки события является асинхронной
// на что указывает ключевое слово "async"
document.addEventListener("click", async (e) => {
  // нас интересует только нажатие кнопки
  if (e.target.tagName !== "BUTTON") return;
  // если нажата кнопка рисования фигуры
  if (e.target.className === "draw_btn") {
    // получаем название кнопки
    // обратите внимание, что мы изменяем название переменной
    // это сделано исключительно для удобочитаемости
    const { btn: btnName } = e.target.dataset;
    // формируем названием фигуры из названия кнопки
    // отличие состоит в первой букве - для фигуры она должна быть заглавной
    const shapeName = `${btnName[0].toUpperCase()}${btnName.slice(1)}`;
    // определяем объект для настроек фигуры
    const shapeParams = {};
    // определяем соответствующие поля для ввода
    const inputsEl = e.target.parentElement.querySelectorAll("input");
    // перебираем их
    inputsEl.forEach((input) => {
      // для каждого поля
      // получаем название свойства
      const { prop } = input.dataset;
      // получаем значение свойства
      // все значения, кроме значения цвета, должны быть числами
      const value = !isNaN(input.value) ? input.valueAsNumber : input.value;
      // добавляем свойство и значение в объект
      shapeParams[prop] = value;
    });
    // добавляем в объект контекст для рисования и список для сообщений
    shapeParams.ctx = ctx;
    shapeParams.listEl = listEl;
    console.log(shapeParams);
    // динамический импорт
    // возвращает объект "Module"
    const ShapeModule = await import(`./modules/shapes/${btnName}.js`);
    // чтобы не указывать название конкретного модуля-класса при импорте
    // мы используем небольшую хитрость
    // создаем экземпляр класса с помощью указания названия фигуры в качестве свойства объекта "Module" (используя скобочную нотацию) и передавая ему объект с настройками фигуры
    const shape = new ShapeModule[shapeName](shapeParams);
    // вызываем метод рисования
    shape.draw();
    // вызываем метод вывода сообщения о площади и периметре фигуры
    shape.report();
  } else {
    // если нажата кнопка очистки холста
    // вызываем соответствующий метод класса "Canvas"
    clearCanvas();
  }
});