graphics Draw a Graphics from a path

[Giulio]

Hello,

I'm  trying to draw a bunch of Graphics object from a custom font (.ttf) letters.

With the help of fontface.js I now have a set of paths, like these:

{
    "A": {
        "o": "m 763 0 l 660 0 l 594 361 l 247 361 l 51 0 l -49 0 l 507 1024 l 567 1024 l 763 0 m 579 449 l 508 860 l 294 449 l 579 449 "
    },
    "B": {
        "o": "m 693 794 q 678 701 693 744 q 635 624 663 658 q 573 565 608 590 q 497 525 538 539 q 568 499 535 517 q 626 455 601 482 q 666 392 651 428 q 681 310 681 356 q 651 183 681 240 q 572 85 622 125 q 452 22 521 44 q 304 0 383 0 l 13 0 l 192 1014 l 428 1014 q 546 997 496 1014 q 628 951 596 981 q 677 882 661 922 q 693 794 693 842 m 594 778 q 547 889 594 850 q 403 928 500 928 l 271 928 l 206 560 l 339 560 q 447 577 399 560 q 527 625 494 594 q 577 694 560 656 q 594 778 594 733 m 582 304 q 522 429 582 385 q 358 474 461 474 l 190 474 l 124 86 l 314 86 q 422 101 372 86 q 506 143 471 115 q 562 211 542 171 q 582 304 582 251 "
    },
    "C": {
        "o": "m 969 868 l 889 810 q 779 905 844 869 q 614 940 714 940 q 431 896 515 940 q 285 779 346 851 q 189 616 224 707 q 154 432 154 525 q 177 288 154 354 q 244 174 200 222 q 351 100 288 126 q 494 74 414 74 q 656 108 582 74 q 804 213 729 142 l 864 151 q 695 32 793 81 q 475 -17 597 -17 q 306 15 383 -17 q 173 104 229 47 q 85 241 117 161 q 54 417 54 321 q 103 658 54 546 q 232 853 151 769 q 417 983 313 936 q 636 1031 522 1031 q 840 984 758 1031 q 969 868 921 938 "
    },
    ...
}

which is the best way to draw my letters with the Pixi Graphics API?

Lately I'll need to animate those Graphics.

 

Thanks for helping me.

[Giulio]

I wrote a bin: https://www.webpackbin.com/bins/-KkkmKN0H2QXR9VfvYVb

[OSUblake]

Lowercase letters (m, l, q), are relative coordinates. You want absolute coordinates, which would be uppercase (M, L, Q). But if you plan on doing animation, converting everything to absolute Cubic Beziers is the best option. 

[OSUblake]

I just looked at your path, and it's all wrong. Those are absolute coordinates, even though the commands are lowercase. But that's only part of the problem. The real issue is that your path isn't correct. You can test it out by drawing it with the Path2D api.

You might want to try a different library, like opentype.js.