How to draw an Image between two objects within the canvas?

Hello! I’m trying to create a sort of skill check system, I’m currently stuck on trying to have an image adjust its width according to two points within the canvas.

Preview here

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class testScript : MonoBehaviour
{
    public Transform start, end;
    public float curLerp;
    [Space(10)]
    public float pingPongSpeed;
    [Space(10)]
    public Transform checkBar;
    [Space(10)]
    public Transform targetStart, targetEnd;
    public Vector2 targetZone = new Vector2(0.2f, 0.4f);

    public Rect areaImg;


    void Start()
    {

    }


    void Update()
    {
        curLerp = Mathf.Lerp(0.0f, 1.0f, Mathf.PingPong(Time.time * pingPongSpeed, 1));
        checkBar.transform.position = Vector3.Lerp(start.position, end.position, curLerp);

        targetStart.transform.position = Vector3.Lerp(start.position, end.position, targetZone.x);
        targetEnd.transform.position = Vector3.Lerp(start.position, end.position, targetZone.y);

        if(Input.GetKeyDown(KeyCode.Space))
        {
            if(curLerp > targetZone.x && curLerp < targetZone.y)
            {
                print("Correct Zone");
            }
            else
                print("Incorrect Zone");
        }
    }

    private void LateUpdate()
    {

        

       /* LineRenderer lineRenderer = GetComponent<LineRenderer>();

        lineRenderer.SetPosition(0, targetStart.transform.position);
        lineRenderer.SetPosition(1, targetEnd.transform.position);*/

    }
}

I tried implementing a line renderer, but it doesnt work properly within the canvas. Any ideas?

With any UI, I would recommend creating the images in PhotoShop or Krita and simply have the images shown when a skill set is unlocked. All you would need would be to call the gameObject.SetActive(true); to make it show up and gameObject.SetActive(false); to make it disappear.