HTML 5 Canvas: Check if context path is inside, and only inside, outer path
<p>I'm building a prototype  hybrid game, a HTML 5 canvas inside a <code>WKWebView</code>, that is intended to help kids learn how to recognise and write letters. Below is an example screenshot of a desired scenario: the user tracing inside a letter</p>

<p><a href="https://i.stack.imgur.com/bpsgq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bpsgq.png" alt="enter image description here"></a></p>

<p>The question is how to determine when/if they've completed the task. I've seen <code>.isPointInPath()</code> used frequently in <a href="http://www.rgraph.net/blog/2013/february/an-example-of-the-html5-canvas-ispointinpath-function.html" rel="nofollow noreferrer">tutorials like this one</a>. From this I know how to determine if the current plotted coordinate is inside another context path, but I don't know where to go from there. I'm drawing the letter using:</p>

<pre><code>ctx.font = '400pt -apple-system';
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillText('S', 32, 500);
</code></pre>

<p>I've thought about dividing the letter into hotspots, first seeing if the point is inside the overall shape and then if it, and the other points, have completed all the hotspots. This feels inelegant however. What is the best approach to solving this problem?</p>