How can i get the drawing coordinates of text in order to render that text on a canvas element?

Question

So i saw this wiggling rainbow text https://codepen.io/mikel301292/pen/eBROMJ

So it looks like this:

var logo = "232.5,115.4,228.3,30.0,164.1,30.0&96.1,30.0,30.0,99.4,30.0,205.9&30.0,290.1,98.0,345.9,160.3,345.9&295.3,345.9,339.7,127.5,339.7,78.9&339.7,-23.4,303.7,86.4,303.7,176.9&303.7,205.8,314.4,345.9,381.8,345.9&473.4,345.9,504.8,128.4,504.8,68.9&504.8,1.4,473.0,62.6,473.0,146.1&473.0,195.5,486.6,345.7,539.8,345.7&609.9,345.7,661.0,182.9,661.0,115.9&661.0,-65.1,616.1,93.0,616.1,112.9&616.1,157.9,741.1,71.7,741.1,71.7&741.1,71.7,674.1,168.2,674.1,267.8&674.1,308.9,698.8,345.9,735.3,345.9&851.2,345.9,850.7,53.0,850.7,53.0&850.7,53.0,911.3,208.9,918.5,349.1&997.2,349.1,1024.5,189.5,1024.5,64.8&1024.5,0.8,985.4,43.5,985.4,115.4&985.4,185.6,1085.0,192.3,1135.7,192.3&1200.8,192.3,1295.4,180.3,1295.4,105.3&1295.4,71.3,1272.7,49.2,1240.6,49.2&1189.5,49.2,1124.6,125.9,1124.6,236.9&1124.6,277.0,1143.1,346.4,1206.7,346.4&1246.2,346.4,1305.1,305.9,1325.5,257.0";

And i want to change the text but i cant find any tools that can give me the right "coordinates". I tried it in Adobe Animate but its just not the same.

Answer 1

Why not try opentype.js? Given you have a true type or opentype font file you can then get the coordinates of a given text string and then use fabricjs to render it on a canvas. At that point you can animate it or apply different colours.