canvas Отследить нажатый элемент

Подскажите, пожалуйста, как отслеживать состояние "элементов" созданных на холсте. Вот простой пример

const canvas = document.getElementById("canvasGame"),
    ctx = canvas.getContext("2d"),
    currentHeight = window.innerHeight / 2;
canvas.height = currentHeight;
canvas.width = currentHeight;
let pathArr = []; const btnSize = currentHeight / 3;
function createRect(recX, recY) {
    let path = new Path2D();
    path.rect(recX, recY, btnSize, btnSize);
    path.closePath();
    colorizeRect(path);
    pathArr.push(path);
}
const rects = {
    1: {x: 0, y: 0, active: false},
    2: {x: btnSize, y: 0, active: false},
    3: {x: btnSize * 2, y: 0, active: false},
    4: {x: 0, y: btnSize, active: false},
    5: {x: btnSize, y: btnSize, active: false},
    6: {x: btnSize * 2, y: btnSize, active: false},
    7: {x: 0, y: btnSize * 2, active: false},
    8: {x: btnSize, y: btnSize * 2, active: false},
    9: {x: btnSize * 2, y: btnSize * 2, active: false}
};

rects.createRect = function () {
    for (let [key, value] of Object.entries(this)) {
        if (!isNaN(key))
            createRect.call(null, value.x, value.y)
    }
};
rects.createRect();

function countProperties(obj) {
    return Object.keys(obj).length;
}

function colorizeRect(path, paint = false) {
    (!paint) ? ctx.fillStyle = "#FFFFFF" : ctx.fillStyle = "rgba(225,225,225,0.5)";
    ctx.fill(path);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#000000";
    ctx.stroke(path);
}

function getXY(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    return {
        x: x,
        y: y
    }
}
document.addEventListener("click", function (e) {
    const XY = getXY(canvas, e);
    //Делаем проверку подошёл ли хоть 1 путь из массива
    pathArr.forEach(i => {
        if (ctx.isPointInPath(i, XY.x, XY.y)) {
            console.log(XY.x + " x " + XY.y);
            for (let i = 1; i < 9; i++) {
                if ((XY.x < rects[i].x) && (XY.x < rects[i].x + btnSize) && (XY.y < rects[i].y) && (XY.y < rects[i].y + btnSize)) {
                    rects[i].active === false ? rects[i].active = true : rects[i].active = false;
                    console.log("i = " + rects[i]); /// Почему не показывает id ключа элемента был
                    console.log(rects[i].active); /// Показать текущее значения активности блока
                }
            }
        }
    });
}, false);

document.addEventListener("mousemove", mouseMoveHandler, false); /// Handler
function mouseMoveHandler(e) {
    const XY = getXY(canvas, e);
    pathArr.forEach(i => {
        if (ctx.isPointInPath(i, XY.x, XY.y)) {
            colorizeRect(i, true);
        } else {
            colorizeRect(i, false);
        }
    });
}

тут рабочий Не могу понять, почему мой перебор выдает в консоль такой "неожиданный результат" по клику на области (я же ведь ограничиваю области). Почему по нажатию на 1-ю ячейку в консоль падает сразу три значения. Как в консоль получить ключь метода rects - с которым потом можно будет работать ?