How to render line renderer or trail renderer above UI canvas

I want to create a line renderer and also trail renderer that would follow touches but both must be rendered above my UI canvas — how can I do this?

I have tried this with the "screen space camera" mode and just came to know that it is not possible with screen space camera.

Is it possible by using line or trail with a "screen space overlay" canvas? If yes, then how could I make line/trail follow the touch position in such a setup?

I tried this before but i was not able to make it appear on screen rather it appeared on world as if it is ignoring the overlay canvas.Then I switched to screen space camera and this problem arose.

• No, this is not possible with an "overlay" canvas. The nature of "overlay" is that its UI is drawn on top of your world objects like line & trail renderers. You need to use Screen Space Camera or World Space in order to get depth sorting and layering between your UI and non-UI objects. Oct 15, 2019 at 17:31
• But i need to use Screen space overlay canvas for ui. So, no way to do this? Oct 16, 2019 at 3:48
• What specific outcome do you want from the screen space overlay canvas? We might be able to help you find alternative ways of achieving that outcome. Oct 16, 2019 at 3:51
• No nothing specific. I was just making an asset for somebody else who told me to use overlay canvas for ui. So, i was trying too. But now since there's no way to achieve this with overlay canvas. I have told him of the changes. Oct 16, 2019 at 11:09

If you want to render things in front of UI then you can't achieve this with "Screen space overly" here is the reason.

So we are having two choices to chose from:

1. World space.
2. Screen space - Camera.

World space:

To achieve such a effect with world space its too easy to do, You just have to change sorting order or Sorting layer of the object to render it front or at back of the UI.

Now when we have to render Line Rendrer or Trail Rendrer in front of the UI, Then i have to change sorting order to some thing bigger then canvas sorting order, Let suppose canves sorting order is 0 then i have to change Line or Trail rendrer sorting order to some thing like 1 or anything bigger then 0.

Canvas Settings:

Trail Rendrer Settings:

Or we can achieve this using Sorting layer. In order to use sorting layer then you have to create multiple layers. By default there is only one layer called "Default".

To create more layer you can click on Sorting layer - Default and then Add Sorting Layer.... And then just add the layers you want...

Now unity will render sorting layer "Default" first then on top it Sorting layer "UI" will be rendered and the at last Sorting layer - Trail will be rendered.

For "Screen space - Camera" same mathod will be applied like in World Space.

I hope this will resolve the quires you have about sorting layer and sorting order and canvas render mode etc.

• Thanks! for the detailed explanation. Oct 16, 2019 at 11:03
• you are welcome. if this answer resolved your issue then consider accept the answer by pressing that tick sign under that voting system. And if you have question please let me know. I will be to help. Oct 16, 2019 at 12:37

I needed to use Screen Space - Overlay (line renderer will not work with this), so I wrote the following code to simulate a line between two objects (it is a gameobject prefab with a black square Image component, nothing else)

 private void createALine(GameObject objA, GameObject objB)
{
/*spawn a prefab image "lineConnection" as angleBar*/
GameObject angleBar = Instantiate(lineConnection, objB.transform.position, Quaternion.identity);
/**/
/*calculate angle*/
Vector2 diference = objA.transform.position - objB.transform.position;
float sign = (objA.transform.position.y < objB.transform.position.y) ? -1.0f : 1.0f;
float angle = Vector2.Angle(Vector2.right, diference) * sign;
angleBar.transform.Rotate(0, 0, angle);
/**/
/*calculate length of bar*/
float height = 5;
float width = Vector2.Distance(objB.transform.position, objA.transform.position);
angleBar.GetComponent<RectTransform>().sizeDelta = new Vector2(width, height);
/**/
/*calculate midpoint position*/
float newposX = objB.transform.position.x + (objA.transform.position.x - objB.transform.position.x) / 2;
float newposY = objB.transform.position.y + (objA.transform.position.y - objB.transform.position.y) / 2;
angleBar.transform.position = new Vector3(newposX, newposY, 0);
/***/
/*set parent to objB*/
angleBar.transform.SetParent(objB.transform, true);
}