Возникли проблемы с получением значения тега select с раскрывающимся списком

я использую FabricJS уже пару дней, и у меня возникли проблемы с получением значения моего выпадающего меню, поэтому я могу правильно применить желаемую форму с помощью прослушивателя событий «щелчок». Поэтому, когда я нажимаю раскрывающееся меню и выбираю " прямоугольник" и нажмите кнопку, он должен создать прямоугольник. Вот мой код:

HTML:

   <p>Choose a Shape</p>

<select id = "shapesId">
    <option value = "square">Square</option>
    <option value = "rectangle">Rectangle</option>
    <option value = "triangle">Triangle</option>
    <option value = "circle">Circle</option>
    <option value = "polygon">Polygon</option>
    <option value = "ellipse">Ellipse</option>
    <option value = "line">Line</option>
</select>

<button id = "realShapes">Go!</button>

поэтому, когда мы нажимаем "Go!" Я хочу получить значение всего, что выбрано с помощью опции фигур. А теперь вот мой Javascript:

const shapes = document.getElementById("shapesId");
const e = shapes.value;
const clickShapes = document.getElementById("realShapes");
clickShapes.addEventListener("click", () => {
    
    if (e === "Rectangle") {
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'black',
        width: 70,
        height: 70,
        angle: 45
    });
    canvas.add(rect);
    }
    
    canvas.renderAll();
})

Я так потерян прямо сейчас и пытался понять это часами, любая помощь будет оценена по достоинству. Спасибо тому, кто это читает!