ref21 @ref

Вопрос не совсем по теме)), но да как уже было написанно: html/css/js
- Для начала разработайте UX/UI и учтите все моменты вашего конструктора,
- Дальне нужно определиться на какой технологии фремворке вы будете реализовывать ваш конструктор, чтобы в случае чего потом не переписывать по 10 раз
- Дальше нужно все хорошо сверстать и реализовать логику

Вот я делал www.tustin.justtwic.art/product-page.html когда-то тут примитивно ток html/Css логика увы уже отдельно ребята решили делать под свой фрейм как там обстоят дела я не знаю!)

https://jsfiddle.net/melchiorio/py07o25h/

Ну, т.е. запоминаем наши области где точка, и проверяем при движении курсора.

А можно еще схитрить, получать цвет пикселя из-под курсора, и точки рисовать каким-нибудь хитрым цветом, который не используется в основной палитре. Например проверять последние цифры цветов, поставить там 8.
Можно еще создать теневой канвас, и там рисовать карту наложения черно-белую, и проверять по ней, это наиболее адекватное решение.
Реализовывать это я конечно не буду.

if(axis === "x")
    ctx.moveTo((position + x0), yMax);
    ctx.lineTo((position + x0), (y0 - dec));
    ctx.stroke();
if(axis === "y")
    ctx.moveTo(x0, (yMax - position));
    ctx.lineTo(xMax, (yMax - position));
    ctx.stroke();

JS вам не Python. Фигурные скобки где?

showAllTiles() { // - Show all items
checkIdButton() { // - Show all items if selected "ALl" button

Возможно стоит сразу нормально назвать (или переименовать)?
С отступами какая-то фигня. Настрой редактор.
Ну и можешь вставить свой код сюда, например, там будут подсказки что исправлять.

Metrics
There are 13 functions in this file.

Function with the largest signature take 1 arguments, while the median is 1.

Largest function has 13 statements in it, while the median is 1.

The most complex function has a cyclomatic complexity value of 3 while the median is 1.

Eight warnings
19	Missing semicolon.
25	Missing semicolon.
40	Missing semicolon.
47	Missing semicolon.
77	Unnecessary semicolon.
82	Missing semicolon.
87	Missing semicolon.
95	Missing semicolon.
One undefined variable
13	newArray
18	newArray
34	newArray
50	newArray
Three unused variables
12	allTilesVisible
28	checkIdButton
2	filterButtons

И да, хинтеры и линтеры могут встраиваться во многие редакторы и IDE.

Добрый день! Сразу бросается в глаза названия переменных и функций;

newArray - не отображает сути
check() - не отображает сути
notFound - что не найдено ?
thisBtnId - зачем this ?

вместо if else можно писать тернарные операторы ;
вместо function () {} стрелочные функции () => {}

вместо if(allHidden === true) просто if(allHidden);

зачем эта строчка if(target.className !== 'filter__btn') return ?

можно так :

if(target.className === 'filter__btn') {
      filteringGallery(target.id);
      };

например:
https://codepen.io/anna_blok/pen/KbooZY

Думаю, как-то так
https://codepen.io/vyprik/pen/gxwQBR

вы проверяете только b на равность null
правильно будет
if (a == null && b == null) {

Чтобы избежать проблем со специфичностью (а у инлайновых стилей специфичность больше), лучше добавляйте и убирайте элементам классы с помощью classList https://developer.mozilla.org/ru/docs/Web/API/Elem...
А для классов в стилях прописывайте нужные css правила. Возьмите это за правило и избавитесь от таких проблем в будущем.