Estoy tratando de dibujar una cuadrícula simple y colorear cada cuadro en el que hago clic. Cuando coloreo en el lado izquierdo alrededor de (0,0), todo parece estar bien. Cuanto más me alejo de (0,0), mayor es el desajuste. No estoy seguro si el problema está en el método drawOnGrid o en otro lugar, por favor ayuda.

Aquí hay un video de demostración del problema.

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); } } }