1

I need to create an array of points (polygon) that represent the outline of a string draw to a canvas in Javascript. Similar to the Java 2D Shape API, where you can create a Polygon object from text.

Any ideas on how I could go about doing this?

user965369
  • 5,413
  • 13
  • 33
  • 47

2 Answers2

2

I don't know of any library that will directly convert character glyphs to canvas paths.

But Yes, here's an idea that works but it's not very direct.

Use Adobe Illustrator to convert text characters to a path outline.

Then use ai->canvas to convert the Illustrator path to an Html Canvas path

BTW, ai->canvas is an amazing library! -- Kudos to Mike Swanson:

You can get the library here: http://blog.mikeswanson.com/post/29634279264/ai2canvas

If the font you want offers an svg version, you can avoid the Illustrator step by using info on this previous post: How to convert text to SVG paths?

Community
  • 1
  • 1
markE
  • 102,905
  • 11
  • 164
  • 176
  • Ok so§what you're suggesting is basically have every different character (a - z) stored as static polygon data, then when you 'request' for polygons of a word it maps all the characters of the word to the stored character polygon data and returns an array of static polygon data structures. Beautiful. – user965369 Apr 24 '13 at 20:09
  • Yep! Tedious for humans--trivial for computers. Of course, if you have specific words/sentences you want to vectorize, you could do them in a word/sentence group. – markE Apr 24 '13 at 20:13
1

You might want to checkout typeface.js. This includes tools to convert true type fonts to glyph data that can be rendered by canvas or webgl.

JoSSte
  • 2,953
  • 6
  • 34
  • 54
John R
  • 126
  • 1
  • 3