The non-trivial problem with image processing.

I need to create an application on the similarity of this:
83893-kid-app.jpg

This mobile app for kids. There is an image that you want to draw a finger across the control points. During drawing validation occurs on the intermediate points. If the user deviates from the route, it is considered an error.
Here, a small amount of images and simple drawings. I think that point is set manually, but I will be more complex images and much more. I would like to automate this process and do not put points manually. All images in PNG format. With GetPixel() I can get all the non-transparent pixels ie the same black outline of image. But the point is too much, because I take each pixel.
How to reduce the number of points(pixels), so that the line width is equal to 1? Please help me find an algorithm to solve this problem? I would be grateful for any help.
Its my code:

  public class PixelsGetter : MonoBehaviour {
        public List<Vector2> points = new List<Vector2>();
        public Transform container;
        public GameObject sphereObj;
        void Start()
        {
            sphereObj = Resources.Load<GameObject>("Sphere");
            Renderer rend = GetComponent<Renderer>();
            Texture2D texture = rend.material.mainTexture as Texture2D;
    
            for (int i = 0; i < texture.width; ++i)
            {
                for (int j = 0; j < texture.height; ++j)
                {
                   Color color = texture.GetPixel(i, j);
                    if (color.a!=0)
                    {
                        points.Add(new Vector2(i,j));
                    }
                }
            }
        var obj = Resources.Load<GameObject>("Sphere");
            foreach (var item in points)
            {
                CreateSphere(item);
            }
        }
       void CreateSphere(Vector2 point)
        {
            var newObj = Instantiate<GameObject>(sphereObj);
            newObj.transform.SetParent(container);
            newObj.transform.localPosition = new Vector3(point.x, point.y, 0);
        }
    }

Here is the result (left original image, to the right - the result created by the 29903 spheres):

What you need is a “thinning” algorithm, which you can use to go from this

83942-guo-hall-thinning-src-img.jpg

to this

83943-guo-hall-thinning-dst-img.jpg

You can find several different algorithms around. This algorithm is often implemented in some form in image processing libraries.

See here or here for example