Crop sprites/icons outside of canvas.

In my (basic) understanding a canvas defines an area which UI elements may be displayed. So I thought that if you drawed sprites outside of an canvas (by positioning it outside) it wouldn’t be draw to the screen. Much like a window.

I’m currently working on a mobile UI, where you can scroll your inventory (layed out in a gridlike manner). When sliding I don’t want the items to go outside of the canvas (inventory window) but rather crop the part of the image that is outside of the inventory window. Sort of like the item is going behind the boarder surrounding the window.

I could do this programatically, but it’s a bit messy and might be unecessary if there is a better, cleaner way to handle this.

Hopefully someone might give me some insight on how to solve this problem.

Kind regards,
SirMoonkis

Hi I know this is post is old, but I’ve found the way to do that right now and maybe it’s useful for someone else.
Just add an Image and a Mask to your Canvas GameObject. I’ve used an image of a full white square.
I’m sure it will not help with performance issues, but at least it works.

If you want the crop area to be rectangular, I suggest using a RectMask2D instead of a regular Mask (the RectMask is more efficient).