Question

I am looking at ways to create Dotted letter fonts for alphabets from A-Z in a canvas tag . Is there an easy way to accomplish this?. I want to create a tool to teach toddlers how to write.

One way to achieve this is to have an image in the background but I’m looking to see if there is a better way to do this

Please point me to examples on how to do this or any suggestions on getting started.

Answer 1

Various ideas:

1. Create a pattern and use that in your call to fillText(). This will not necessarily align the dots on letter strokes, however.

2. Create your own font out of strokes, and then draw it as a dashed line (my example).

3. Create your own font out of strokes, and then draw it using SVG with stroke-dasharray.

4. Find a free font like Dotline or Trace Font for Kids or Print Clearly Dashed and embed it in CSS or embed it in SVG.