Can't get UI Canvas to overlay the scene

I am creating a UI canvas via script and am trying to create a side bar that will overlay the screen during gameplay, but when I set the canvas render mode to “Screen Space - Overlay” it does not overlay the scene at all, and simply sticks the UI in the world space. The “Screen Space - Camera” render mode works correctly, but when using this mode I encountered a lot of clipping issues that the Overlay mode would prevent if I can get it to work.

Here is the code I use to create the UI canvas and the side bar:

        //  Create the canvas.
        canvas = new GameObject("Battle UI Canvas", typeof(RectTransform));
        canvas.transform.position = new Vector3(canvas.transform.position.x, canvas.transform.position.y, canvas.transform.position.z - 1.0f);
        canvas.GetComponent<Canvas>().renderMode = RenderMode.ScreenSpaceOverlay;
        canvas.GetComponent<Canvas>().worldCamera = Camera.main;
        canvas.GetComponent<Canvas>().planeDistance = 5.2f;
        canvas.GetComponent<CanvasScaler>().uiScaleMode = UnityEngine.UI.CanvasScaler.ScaleMode.ScaleWithScreenSize;
        canvas.GetComponent<CanvasScaler>().referenceResolution = new Vector2(Screen.width, Screen.height);
        canvas.GetComponent<CanvasScaler>().matchWidthOrHeight = 0.5f;

        //  Create the side bar
        int sideBoxHeight = (int)(Screen.height * 1.5);
        int sideBoxWidth = (int)(Screen.width * 0.170);

        GameObject sideBoxLeft = new GameObject("UI Box Left");
        SpriteRenderer boxLeft = sideBoxLeft.AddComponent<SpriteRenderer>();

        var mTexture = new Texture2D(sideBoxWidth, sideBoxHeight);
        Color[] myColours = new Color[sideBoxWidth * sideBoxHeight];
        for (int j = 0; j < (sideBoxWidth * sideBoxHeight); j++) { myColours[j] = Color.gray; }


        Sprite mSprite = Sprite.Create(mTexture, new Rect(0.0f, 0.0f, mTexture.width, mTexture.height), new Vector2(0.5f, 0.5f), 100.0f);
        boxLeft.sprite = mSprite;
        boxLeft.transform.localScale += new Vector3(69.0f, 69.0f, 69.0f);
        sideBoxLeft.GetComponent<RectTransform>().anchoredPosition = new Vector2(-(Screen.width / 2.0f) + (sideBoxWidth / 3.0f), 0);
        sideBoxLeft.transform.SetParent(canvas.GetComponent<Canvas>().transform, false);

And here is the result:

Instead of overlaying the scene the side bar is created in the same plane as the game objects and is massive. I don’t understand why this is happening, as it displays correctly when the render mode is set to “Screen Space - Camera”.

If anyone can point out what I am doing wrong I would really appreciate it!

It is world space which means it’s following the rules of depth testing. If you pull the canvas up a little it will look fine. Right now it’s at the exact same height as the other grey sprite. That’s called z-fighting, it’s not clear what’s closer to the camera. Either use separate camera that render your UI and the grey rectangle one after the other, or make sure they’re on differing heights.

Right, I’ve found the issue. The UI elements I’m trying to add to the canvas are using sprite renderers, which aren’t supposed to be used for UI elements. Changing them to Image instead fixes this.