javascript - How can I recognize a hand drawn shape is similar to a SVG Model -

i let users re-draw on svg shape (the number 8), , able detect if shape completed or not. user have re-draw on borders of svg, finger on mobile, abie continue through website. want use javascript.

my first approach use hidden divs , detect whenever mouse passes on each 1 in right order (see sketch), there can errors. , highlight drawn track in way show filling progress.

which approach should use ?

well, depends on how implemented drawing canvas. without actual code, it's difficult provide answer.

regardless, might try use second path hidden/transparent , overlaps first one.

then capture mouseenter/mouseleave (or whatever events you're using "draw") , based on event coordinates, assess if "shape" correctly draw or not.

basic example:

var foo = document.getelementbyid('foo'),    x = -1,    y = -1;    function between(n, en, err) {    return (n >= en - err && n <= en + err);  }    function fail() {    // user failed stuff accordingly    console.warn('user failed draw properly');    // reset stuff    x = -1;    y = -1;  }      foo.addeventlistener("mouseenter", function(event) {    console.log('enter: ' + event.x + ',' + event.y);    if (x === -1) {      // first enter, check if user started in correct position      // tied position of canvas, if user must start @ beginning      // of path or can start wherever...      // should implement own logic      return;    }      // check if drawing complete    // onde again, same above        // check if after first mouseleave, mouseenter event    // in acceptable range    if (!between(x, event.x, 10) || !between(y, event.y, 10)) {      fail();    }    });    foo.addeventlistener("mouseleave", function(event) {    console.log('exit: ' + event.x + ',' + event.y);    x = event.x;    y = event.y;  });

<svg>    <path id="foo" d="m100,100           l150,100           a50,25 0 0,0 150,100           q50,-50 70,-170           z" stroke-width="20" style="stroke: red; fill: none;" />    <path d="m100,100           l150,100           a50,25 0 0,0 150,100           q50,-50 70,-170           z" style="stroke: #006666; fill: none;" />  </svg>

for instance, in example accept "error" of 10px. set stroke of hidden path 20px.

when user mouse leaves accepted drawing area, if not reenters in acceptable range, fails drawing , resets.

this example, can build this