Soy nuevo en Canvas. Por favor, ayuda. Tengo un lienzo como en esta imagen . Todos estos son mapas de mosaicos. Seguí MDN Docs para pintar el mosaico en el lienzo.

Quiero lograr así . ¿Cómo obtengo el grupo de fichas del mismo color?

Creé una función para saber en qué mosaico se hace clic. Obtengo (col , fila) y también quiero obtener el tamaño del mosaico como 1 * 1 o 3 * 3 y así sucesivamente.

En Canvas.js Obtención de coordenadas y manejo del evento de clic

 function getCoords(e) { const { x, y } = e.target.getBoundingClientRect(); const mouseX = e.clientX - x; const mouseY = e.clientY - y; return [Math.floor(mouseX / 32) + 1, Math.floor(mouseY / 32) + 1]; } const handleClick = (event) => { console.log(getCoords(event)); }; // some more stuff return <canvas ref={canvasRef} {...rest} onMouseDown={handleClick} />;

En index.js

 <main className={styles.main}> <div className={styles.tileset_container_selection}></div> <div className={styles.canvasContainer}> <Canvas draw={draw} /> </div> </main>