Is there a way to have line renderer on a canvas?

Question

I’d love to know if there was a way to get my Line Renderer on a Canvas (or some other way to draw lines on a canvas)

Sitter

Answer 1

Just tried this and it simply doesn’t render on the UI. I can see the line on the canvas exactly where I expect in the scene view but it’s not there on the Game view.

However whilst looking at why it wasn’t rendering I came across this page …

http://forum.unity3d.com/threads/new-ui-and-line-drawing.253772/

Maybe that’ll help.

Dowse

can i draw multiple line using line renderer???

– Prunella

I added some notes to further describe. It's pretty basic man. The bottom portion of code is the thing that either adds to an existing buildjob, or makes its own. You'd add that portion to your button or whatever. Don't forget to mark this as an answer. As it's a highly valid answer.

– Shilashilha

Answer 2

Hi just use a panel filled with any color you want and use Height and Widith to set the length and the widith of your line,

Lawless

I spend hours going went down this rabbit hole, wish you had been provided a sample code.

– Dittany

Answer 3

If anyone’s still looking for the answer:
https://forum.unity3d.com/threads/render-lines-on-top-of-panel-ui-element.287023/

Use Screen Space - Camera, assign the camera, and increase the width of the line so it becomes visible.

Tympanites

That was the solution I was looking for the past 2 hours! Thank you!

– Merete

This is the solution! Create a separate canvas for you lines and follow the stated steps

– Israelitish

There is also a checkbox on the lineRenderer "Use World Space". Uncheck that and you are good. Also, thank you!

– Vmail

Answer 4

I ran across two other solutions not mentioned here while looking for a way to draw lines in a UI canvas. These solutions probably don’t apply to all situations, but they may be helpful to some.

Render Texture Solution

• Create a Render Texture in your assets.
• Create a second camera in your scene.
• In your second camera’s Target Texture option, specify your new Render Texture.
• Assemble your Line Renderer and some background Quad some distance away from your GameObjects. Make your second camera watch that.
• Create a Raw Image in your Canvas and have it render your Render Texture.

Low Level Graphics Solution

• Use Unity’s low level graphics library: GL.

Tertias

Answer 5

Nothing works for me…
I have the canvas on the camera, the z axis, the material and all but I still can’t figure out why I’m unable to see the lines in the gamemode.

Dated

Maybe clip plane property of camera (canvas)?

– Fireboard

Answer 6

Here’s a simple solution I found that doesn’t require the change of Canvas mode or use the Line Renderer.

Create a UI image and attach this script.
Use the y scale to change the thickness.

Enjoy!

using UnityEngine;
using UnityEngine.UI;

public class LineRendererUi : MonoBehaviour
{
    [SerializeField] private RectTransform m_myTransform;
    [SerializeField] private Image m_image;
    
    public void CreateLine(Vector3 positionOne, Vector3 positionTwo, Color color)
    {
        m_image.color = color;

        Vector2 point1 = new Vector2(positionTwo.x, positionTwo.y);
        Vector2 point2 = new Vector2(positionOne.x, positionOne.y);
        Vector2 midpoint = (point1 + point2) / 2f;

        m_myTransform.position = midpoint;

        Vector2 dir = point1 - point2;
        m_myTransform.rotation = Quaternion.Euler(0f, 0f, Mathf.Atan2(dir.y, dir.x) * Mathf.Rad2Deg);
        m_myTransform.localScale = new Vector3(dir.magnitude, 1f, 1f);
    }
}

Bal