How does Graphic Raycaster work

From here

What is a raycast? What are blocking objects and blocking mask?
A ray is a mathematical device that starts at an origin point and continues on in a specific direction forever. With a raycast you're casting a ray, cast being used like the word throw. It's like if you threw a rock and it continued on in that direction forever, it wouldn't stop until it hit something. You're interested as to whether it hit an object and what that object was.

Blocking objects would be the objects that you specifically define your raycast to be able to hit.
A blocking mask allows you to, instead of passing tons of blocking objects, define the layers in Unity you want your raycast to be able to hit in the form of a bitmask. The bitmask is coded so each bit represents a layer. If your bitmask was 0000000000000101 represented as (1 | 1<<2) or 5 then your raycast will only be blocked by layers 1 and 3 and can therefore only hit objects in those layers.

Graphic Raycaster and Unity's Event System
Unity's GraphicRaycaster was introduced in version 4.6 along with a bunch of other stuff that's all part of Unity's new events system. For that reason, the GraphicRaycaster was originally meant to be used through this system (same with the Physics Raycaster and its 2D counterpart, which are all different from Physics.Raycast which is meant for generic raycasts not necessarily originating from UI events). There are two options for the use of this component in Unity.

If you want to go the full on Unity way using Unity's EventSystem, you're going to need to place one in your scene. You can find this under GameObject > UI > Event System. From here you have a few methods of capturing the event and using it to your will.

• Use event triggers (found in Component > Event > Event Trigger and use the editor to create all your connections.
• If you would like to avoid the editor, your MonoBehaviour can implement a given interface depending on the event your want to capture. These are the UnityEngine.EventSystems.I...Handler interfaces like the IBeginDragHandler interface

This video shows the specific implementations of each method.
For more on the event system, triggers, and how they all work together this video might help as well.

You can also use it directly by calling the GraphicRaycasters Raycast function itself instead of creating code as a response to an event. For this we need the following snippet of code where we create a PointerEventData object to send to the Raycast function.

//Code to be place in a MonoBehaviour with a GraphicRaycaster component
GraphicRaycaster gr = this.GetComponent<GraphicRaycaster>();
//Create the PointerEventData with null for the EventSystem
PointerEventData ped = new PointerEventData(null);
//Set required parameters, in this case, mouse position
ped.position = Input.mousePosition;
//Create list to receive all results
List<RaycastResult> results = new List<RaycastResult>();
//Raycast it
gr.Raycast(ped, results);

results will now contain all of your hit canvas objects. This is pretty much the same way that PointerInputModule does raycasting with EventSystem.RaycastAll in Unity (except with more caching).

Your specific problem with the button.
Try setting the OverlayCanvas to not be on a layer. I think the fact that it's on a layer in the first place might be breaking things because it looks like the default it for a Graphic Caster is to be blocked by "Everything" which I'm guessing your BGCanvas has it's blocking mask set to.