Stop LineRenderer from drawing between colliders

I’m trying to make a game where users have to trace alphabets. Alphabets are made of colliders. I cast a ray to see if there is a collider and then start drawing using the LineRenderer. But the problem I am facing is that LineRenderer even draws where there are no colliders (as seen in the image). I wish to draw only where there is a collider but can’t seem to figure it out.


My script for detecting colliders and enabling drawing script, “Tracer.cs”:

using UnityEngine;
using UnityEngine.SceneManagement;
using System.IO;
using System.Collections.Generic;

public class Tracer : MonoBehaviour
{
    public PolygonCollider2D[] tracepoints;
    private int index;
    private int checkLevel;
    private bool firstTime;

    void Start()
    {
        index = 0;
        checkLevel = tracepoints.Length;
        firstTime = true;
    }

    void Update()
    {
        if (firstTime)
        {
            EnableScripts(true);
        }
        if (Input.GetMouseButton(0))
        {
            Camera cam = Camera.main;

            //Raycast depends on camera projection mode
            Vector2 origin = Vector2.zero;
            Vector2 dir = Vector2.zero;

            if (cam.orthographic)
            {
                origin = Camera.main.ScreenToWorldPoint(Input.mousePosition);
            }
            else
            {
                Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
                origin = ray.origin;
                dir = ray.direction;
            }

            RaycastHit2D hit = Physics2D.Raycast(origin, dir);

            //Check if we hit anything
            if (hit)
            {
                EnableScripts(true);
                if (hit.collider.name == tracepoints[index].name)
                {
                    firstTime = false;
                    index++;
                }
                if (index == checkLevel)
                {
                    SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
                }
            }
            else
            {
                EnableScripts(false);
            }
        }
    }

    private void EnableScripts(bool value)
    {
        GameObject.Find("Main Camera").GetComponent<DrawDot>().enabled = value;
        GameObject.Find("Main Camera").GetComponent<DrawLine>().enabled = value;
    }
}

The code for “DrawLine.cs”. I believe the issue is in this file:

using UnityEngine;

public class DrawLine : MonoBehaviour
{
    public GameObject currentLineRenderer;
    public GameObject lineRendererPrefab;
    private bool clickStarted = false;
    private int numOfPoints;

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            TouchPhaseHandle();
            clickStarted = true;
        }
        else if (clickStarted)
        {
            TouchPhaseHandle();
        }
        if (Input.GetMouseButtonUp(0))
        {
            clickStarted = false;
            currentLineRenderer = null;
            numOfPoints = 0;
        }
    }

    private void TouchPhaseHandle()
    {
        if (currentLineRenderer == null)
        {
            currentLineRenderer = Instantiate(lineRendererPrefab) as GameObject;
            GameObject lines = GameObject.Find("lines");
            currentLineRenderer.transform.parent = lines.transform;
        }
        numOfPoints++;

        Vector3 mousePos = Input.mousePosition;
        Vector3 temp = new Vector3(mousePos.x, mousePos.y, -5 - Camera.main.transform.position.z);
        Vector3 wantedPos = Camera.main.ScreenToWorldPoint(temp);

        LineRenderer newLineRenderer = currentLineRenderer.GetComponent<LineRenderer>();
        newLineRenderer.positionCount = numOfPoints;
        newLineRenderer.SetPosition(numOfPoints - 1, wantedPos);
    }
}

If you want to make discontinuous lines with a LineRenderer, you need to terminate the current LineRenderer and make a new one.

I have tried various ways such as setting it renderer to null if raycast is not hitting anything but it is not working.
Any alternate approaches?

Are you trying to make a line that has a break in it?

The word consists of 2 parts. The user should ideally trace both parts in a single swipe each. The user has to draw the 1st part in a single swipe and then lift their finger and then draw the 2nd part. Everything works fine if user lifts the finger after finishing 1st part and then goes to part 2 and then puts down their finger.
The bug is if user starts drawing from a point where is collider and then moves to a point where is no collider and then moves to a point where is collider again, for example, directly from 1 to 2 without lifting their finger, then it also draws a line between those two parts. This is undesirable feature (See second image). I want to stop this behavior.

5415249--550356--upload_2020-1-28_12-49-25.png 5415249--550359--upload_2020-1-28_13-12-18.png

You probably have a subtle flow bug that is causing your second touch to still interoperate with the first touch’s LineRenderer.

To find it, try this approach: when you complete a touch and lift your finger, immediately Destroy() that freshly-created line and set the currentLineRenderer = null;

That way when you start the next line you’ll get an error and you can figure out why.