3

I'm building a prototype hybrid game, a HTML 5 canvas inside a WKWebView, 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

enter image description here

The question is how to determine when/if they've completed the task. I've seen .isPointInPath() used frequently in tutorials like this one. 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:

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

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?

Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57
  • 1
    You need to convert the font to path. I found a way to convert svg to canvas so you can create the letter ins svg and convert it to path, http://stackoverflow.com/questions/2907537/is-there-a-way-to-convert-svg-files-to-html5s-canvas-compatible-commands – Mosh Feu Jan 19 '16 at 13:44
  • Thanks @MoshFeu I'll look into this now – Ryan Brodie Jan 19 '16 at 14:34
  • @RyanBrodie. No time...quick suggestion! 1. Draw your letter on the canvas, 2. use `getImageData` to determine which pixels are opaque (opaque==inside the letter), 3. Listen for mousemove. If the mouse is over an opaque pixel you're inside the letter. If the mouse is over a transparent pixel you're outside. Solution: Use your hotspot idea! Divide the letter into sections that incrementally complete the letter. Test mousing with #1-3. Give kids feedback when they mouse outside the opaque pixels. Give kids feedback when they regress to previous hotspots (==already traveled). Gotta go!!! – markE Jan 19 '16 at 19:05
  • 1
    @markE I like your thinking! Will get on this first thing in the morning, thanks will update with my findings. – Ryan Brodie Jan 19 '16 at 19:06
  • Would this work for you? https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath – Raphael Rafatpanah Mar 07 '18 at 23:24

0 Answers0