I'm new to canvas Please Help. I have a canvas like in this Image. All these are tile maps I followed MDN Docs to paint the tile on the canvas.

I want to achieve like this. How do I get the group of tiles of same color?

I created a function to know which tile is clicked. I get (col , row) and I also want to get the size of the tile like 1 * 1 or 3 * 3 and so on.

In Canvas.js Getting Coordinates and handling click event

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

In index.js

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