I'm designing a tutorial for a Unity game and am stuck at what seems like a trivial problem. For every step in the tutorial, I guide the user by hiding everything on the screen except the buttons they need to press. My game hierarchy looks like this.

Button Canvas
   Select_Me_Button
   Dont_Select_Me_Button
Tutorial Canvas
   Mask Group 1
      Left Border Mask
      Right Border Mask
      Up Border Mask
      Down Border Mask
   Mask Group 2 ...

The TutorialCanvas GameObject has a Canvas component with a higher sorting order than ButtonCanvas. I added GraphicRaycaster Component with Blocking Mask set to everything and Blocking Objects set to None for the TutorialCanvas. However, even though TutorialCanvas renders on top of Button Canvas, I am still able to click through the mask and trigger buttons that are not supposed to be clickable. I was able to block clicks by adding image components functioning as masks to parent objects Mask Group 1 and Mask Group 2 belonging to TutorialCanvas, but this is not desirable, because I need to group the image components to create a mask, and gameobject can only accept 1 image component.

I'm having a hard time imagining this is so hard. I just need one canvas with a mask to block clicks going to a canvas behind it.