How to draw letters/symbols using canvas and validate them?

Question

I want to achieve something like this:
The application will put a background with the letter, and users will draw over it tracing the indicators with strokes. The main thing is to somehow validate the strokes, and its order and direction.

I've tried with the Gestures library but it is imprecise, and I haven't found enough helpful information about Canvas. I'm not searching for a full response, just some kind of clue or tutorial to start with.

Thanks in advance.

Answer 1

I did something like that with RN:

1. Open Figma and draw a path like this number 5 (it must be only a line)

<svg width="52" height="65" viewBox="0 0 52 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52 1C52 1 32 1.00002 25.5 3.00006C19 5.0001 16.5 17.5 16.5 17.5C13.886 26.9226 29.1811 32.3091 36 41C42 48 29 65 16.5 63.5C8.65327 61.8949 5.49592 59.4015 1 53.5" stroke="#FF0000"/>
</svg>

2. Get the points and the angles with the library svg-path-properties to get the length and all the point of the line (x,y)
3. Draw the SVG in the screen. Draw a touchable point. If the user move that point you need to calculate the current position with the array of points (x,y)[] if it match, you can draw the percent of the line that the user moved with his/her finger.

In order to do it I used strokeDashoffset:

import Svg, { Path } from 'react-native-svg';
const PathAnimated = Animated.createAnimatedComponent(Path);
strokeDashoffset={animationsValue[index].strokeLenght}
strokeDasharray={`${pathData[index].length}, ${pathData[index].length}`}

I don't know if someone has a better approach. I figured out this solution.