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

Question

I would like to let users re-draw over a svg shape (the number 8), and be able to detect if the shape is well completed or not. The user will have to re-draw over the borders of this svg, with his finger on mobile, to be abIe to continue through the website. I want to use Javascript.

My first approach was to use hidden divs and detect whenever the mouse passes over each one in the right order (see sketch), but there can be errors. And I would also like to highlight the drawn track in a way to show the filling progress.

Which approach should I use ?

Here's a kids game I did a while back that scores based on how well you can "draw inside the lines". You might start with this since it allows the user to be less than perfect in their tracing while still providing a score that your can use to judge if they have succeeded or not: http://stackoverflow.com/questions/29176146/how-to-draw-in-javascript-canvas-and-compare-it-to-a-shape/29176294#29176294 — markE, Jul 22 '15 at 18:06

Tivie · Answer 1 · 2015-07-22T15:28:49.773

Well, it depends on how you implemented your drawing canvas. Without the actual code, it's difficult to provide a good answer.

Regardless, you might try to use a second path that is hidden/transparent and overlaps the first one.

Then capture the mouseenter/mouseleave (or whatever events you're using to "draw") and based on the event coordinates, assess if the "shape" was 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 so do stuff accordingly
  console.warn('User failed to 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, so check if user started in the correct position
    // This is tied to the position of the canvas, if the user must start at the beginning
    // of the path or he can start wherever...
    // so you should implement your own logic
    return;
  }

  // Check if drawing is complete
  // Onde again, same as above


  // check if after the first mouseleave, the mouseenter event was
  // in an 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 this example I accept an "error" of 10px. So I set the stroke of the hidden path to 20px.

When the user mouse leaves the accepted drawing area, if it not reenters in an acceptable range, it fails the drawing and resets.

This is just an example, but you can build from this

Thanks a lot for your help. I will try to continue with your code. — Louis Serre, Jul 22 '15 at 16:32
Well I tried to continue working with you code but i didn't succeed. Just to you know this is something like this I need http://jsfiddle.net/fuzic/kKLtH/. Now i just need to check progress — Louis Serre, Jul 24 '15 at 13:17

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

1 Answers1

Basic example: