Always render UI text on top layer

Hello, in my project i have a Canvas with UI text under it in the hierarchy, and on my main camera i have this script that fades out the screen:

#pragma strict
 
 // FadeOut
 
 var fadeTexture : Texture2D;
 var fadeSpeed = 10.5;
 var drawDepth = -1000;
 
 public var alpha = 0.6; 
 private var fadeDir = -1;
 
 public function OnGUI(){
     
     alpha += fadeDir * fadeSpeed * Time.deltaTime;  
     alpha = Mathf.Clamp01(alpha);   
     
     GUI.color.a = alpha;
     
     GUI.depth = drawDepth;
     
     GUI.DrawTexture(Rect(0, 0, Screen.width, Screen.height), fadeTexture);
 }

The script works well but my problem is that the UI text appears underneath the fade effect, but it should be “on top” of the fading effect, i have tried setting them to different layers, but doesn’t really do anything. Any idea how i could fix this?

Since you are using new UI Text component. You can add a UI>Image also under canvas. Image should be above Text Object. Since UI Objects in Canvas hierarchy at the bottom are rendered at top.
38426-ans.png

Your Image should be black. Change ‘alpha’ value of Image through script.
You can access it like this:

public Image image;  //Drag your Image object from Canvas here

image.color.a = "Change value from 0 to 255 to make image from transparent to black i.e. fade in effect"