Tengo un cuadrado de lienzo básico con una cuadrícula de rectángulos dentro, ¿cómo puedo crear eventos de clic que cambien el color de relleno de un rectángulo específico dentro de la cuadrícula cuando se hace clic? ¿Hay algún método para encajar dentro de la detección de coordenadas de bucle o hay una mejor biblioteca que cree rectángulos en los que se puede hacer clic?
Aquí hay una demostración de mi trabajo: https://codesandbox.io/s/brave-worker-ywe3z5
const App = () => { const canvasRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; const context = canvas.getContext("2d"); context.imageSmoothingEnabled = false; context.fillStyle = "#000000"; context.fillRect(0, 0, context.canvas.width, context.canvas.height); for (var y = 1; y <= 1000; y += 11) { for (var x = 1; x <= 1000; x += 11) { context.fillStyle = "rgba(255,255,255,0.1)"; context.lineWidth = 1; context.fillRect(x, y, 10, 10); } } }, []); return <canvas ref={canvasRef} width={1002} height={1002}></canvas>; }; ReactDOM.render(<App/>, document.getElementById('root')); .App { font-family: sans-serif; text-align: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>Aquí hay una muestra de algo que estoy tratando de lograr: https://www.sandbox.game/en/map/