Javascript generates dotted fonts on canvas

Question

I am looking at ways to create dotted letter fonts for alphabets from AZ in the canvas tag. Is there an easy way to achieve this? I want to create a tool for teaching kids how to write.

One way to achieve this is to have the image in the background, but I am looking to see if there is a better way to do this.

Please provide me with examples of how to do this or any suggestions for getting started.

Answer 1

Various ideas:

• Create a template and use it when calling fillText() . However, this does not necessarily lead to alignment of points on the strokes of the letters.

• Create your own font from the strokes, and then draw it like a dashed line (my example).

• Create your own font from the strokes, and then draw it using SVG with stroke-dasharray .

• Find a free font, such as Dotline or Trace Font for Kids or Print clearly dotted and embed it in CSS or embed it in SVG .