I'm trying to draw a simple grid and color every box that I click on. When I color on the left side around (0,0), everything seems to be fine. The further I go from (0,0) the bigger the misplacement is. I'm not sure if the problem is in the drawOnGrid method or somewhere else, please help.

Here is a video demo of the problem

grid-system.js

export default class GridSystem {
  constructor() {
    this.gameContext = this.#getContext(1920, 1080, '#444');
    this.cellSize = 32;
    this.padding = 2;
    this.gridSize = {
      x: 55,
      y: 25,
    }
  }

  getGameContext() {
    return this.gameContext;
  }

  #getContext(width, height, color = "#111", isTransparent = false) {
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    this.canvas.width = width;
    this.canvas.height = height;
    this.canvas.style.position = 'absolute';
    this.canvas.style.background = color;

    if (isTransparent) {
      this.canvas.style.background = 'transparent';
    }

    document.body.appendChild(this.canvas);

    this.context.moveTo(0, 0);

    return this.context;
  }

  drawOnGrid(x, y) {
    let posX = Math.floor(x / this.cellSize) * (this.cellSize + this.padding);
    let posY = Math.floor(y / this.cellSize) * (this.cellSize + this.padding);

    console.log(Math.floor(x / this.cellSize), Math.floor(y / this.cellSize), posX, posY)
    this.gameContext.fillStyle = '#c3c3c3';
    this.gameContext.fillRect(posX, posY, this.cellSize, this.cellSize);
  }

  render() {
    for (let row = 0; row < this.gridSize.x; row++) {
      for (let col = 0; col < this.gridSize.y; col++) {
        this.gameContext.fillStyle = '#0f2d7a';
        this.gameContext.fillRect(
          row * (this.cellSize + this.padding),
          col * (this.cellSize + this.padding),
          this.cellSize,
          this.cellSize
        );
      }
    }

    this.gameContext.font = "20px Courier";
    this.gameContext.fillStyle = "white";
    this.gameContext.fillText('Grid system working', 20, 30);
  }
}

game-engine.js

import GridSystem from './grid-system.js';

export default class GameEngine {
  constructor() {
    this.gridSystem = new GridSystem();
    this.gridSystem.getGameContext();
    this.gridSystem.render();
    this.gameContext = this.gridSystem.getGameContext();
    this.gameContext.canvas.onclick = (e) => {
      let {
        x,
        y
      } = this.gameContext.canvas.getBoundingClientRect();
      let mouseY = e.clientY - x;
      let mouseX = e.clientX - y;
      this.gridSystem.drawOnGrid(mouseX, mouseY);
    }
  }
}