Javascript HTML5画布：检查上下文路径是否在外部路径内部，并且仅在外部路径内部

我正在制作一个混合游戏原型，它是一个HTML5画布，位于

WKWebView

中，旨在帮助孩子们学习如何识别和书写字母。下面是一个所需场景的示例屏幕截图：用户在一封信中进行跟踪

问题是如何确定他们何时/是否完成了任务。我看到在中经常使用

.isPointInPath（）

。由此，我知道如何确定当前绘制的坐标是否位于另一个上下文路径内，但我不知道从那里可以走到哪里。我用以下方法来画这封信：

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

---

我曾考虑过将字母划分为几个热点，首先查看该点是否位于整体形状内，然后查看它和其他点是否已完成所有热点。然而，这感觉不雅。解决此问题的最佳方法是什么？

您需要将字体转换为路径。我找到了一种将svg转换为画布的方法，这样您就可以在svg中创建字母并将其转换为路径，谢谢@MoshFeu，我将对此进行研究now@RyanBrodie. 没时间…快提建议！1.在画布上画你的信，2。使用

getImageData

确定哪些像素是不透明的（不透明==字母内部），3。听鼠标移动。如果鼠标位于不透明像素上，则位于字母内部。如果鼠标在一个透明像素上，你就在外面。解决方案：使用您的热点想法！将信件分成多个部分，逐步完成信件。用#1-3测试鼠标移动。当孩子们将鼠标移到不透明像素外时，给他们反馈。当孩子们回到以前的热点（=已经去过）时，给他们反馈。我得走了@马克，我喜欢你的想法！我早上第一件事就要开始了，谢谢。这对你有用吗？