Visual Joystick moving faster than my finger. why?

Question

First of all, here's the video of what my problem really is. (Sorry for bad quality)

As you can see, the red circle is the center of the visual joystick. The green one indicates my finger and the white circle is the handle of my joystick.

As you can see it works but the handle goes faster than my finger, I don't know why this happens

Here's the code for setting the handle's position:

            RawDirection = Input.GetTouch(CurrentFingerID).position -
                (Vector2)BGRect.position;

            if (RawDirection.magnitude > BGRect.sizeDelta.x / 2)
                RawDirection = RawDirection.normalized * BGRect.sizeDelta.x / 2;

            HandleRect.anchoredPosition = RawDirection;

meaning of the variables:

• CurrentFingerID is used to save which finger is on the joystick currently.
• BGRect is the RectTransform attached to the BG (see the pic below)
• HandleRect is the RectTransform attached to the Handle (see the pic below)

And these are BG and Handle:

BG and Handle settings:

I think RawDirection should be divided by some number to fix this issue. Any help is appreciated and feel free to ask for additional info

Answer 1

It looks like I should have used RectTransformUtility:

RectTransformUtility.ScreenPointToLocalPointInRectangle(ResponseArea, Input.touches[CurrentFingerID].position, null, out FingerPositionInRect);
RawDirection = FingerPositionInRect - ((BGRect.anchorMax + ResponseArea.sizeDelta) - BGRect.anchoredPosition;

(ResponseArea is the RectTransform of the Joystick)