Coordinates for dot fonts in Javascript

Question

Inspired by this tutorial , which

• draws the word "google"
• in the form of many manually arranged circles / balls (1)
• on canvas html5,

in 1), for example. it's 'o'

new Ball(210, 81, 0, 0, red); new Ball(197, 91, 0, 0, red); new Ball(196, 103, 0, 0, red); new Ball(200, 116, 0, 0, red); new Ball(209, 127, 0, 0, red); new Ball(223, 130, 0, 0, red); new Ball(237, 127, 0, 0, red); new Ball(244, 114, 0, 0, red); new Ball(242, 98, 0, 0, red); new Ball(237, 86, 0, 0, red); new Ball(225, 81, 0, 0, red); 

I would like to know if there is a way to determine the coordinates for more automated circles. For example, is there a way to get positions from font paths?

edit: My goal is to display at least all the usual letters (both cases) and numbers that are at least 62 characters long.

cont .: People who stumble over this question may also want to take this one .

Answer 1

Is there a way to get positions from font paths?

Not in canvas or using canvas commands.

There are various programs that turn fonts into SVG paths.

But you cannot just use SVG path points, because, for example, a Bezier curve is described by only three points, but it can be 1/4 of a circle. Of these paths, there are algorithms that divide paths up into a series of points (i.e., “Q” will become 100 points describing a circle and a line).

You should be able to easily find these individual parts.

The easiest way is to start with a pixel font ( like this ) and make each black pixel a point. Of course, you will not get a very good resolution, but it should be very easy.