How can I make text orbit along a circular path using HTML5 Canvas?

Question

There are a number of JavaScript snippets that will make text or graphics travel along a circular path with the letters or words always upright.

Example: http://www.dseffects.com/f_scripts.html

I want to have text (or graphics) orbit a point the way the moon orbits the Earth, with one face always toward the center. The following example shows this, but very crudely and not using web fonts.

Example: http://javaboutique.internet.com/text/Manipulation/TextRotor/

I am sure there is a way to modify orbiting code like the first example (only not around the cursor) so that each letter/image keeps one side toward the center (axis).

Answer 1

SVG really is the way to go for this kind of thing. I just whipped this up really quick but at least it works as an example. The HTML part can vary a lot but this is one way.

Put this into an html page:

<iframe src="orbitingText.svg" width="100%" height="100%"></iframe>

Then, create the orbitingText.svg file (it's just a text file with a .svg extension):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
<defs>
    <path id="textPath" d="M 150 75 a 75 75 0 1 0 0.00001 0"/>
</defs>
<circle cx="150" cy="150" r="40" stroke="blue" stroke-width="1"></circle>
<text fill="red">
    <textPath xlink:href="#textPath" startOffset="0">
        <animate attributeName="startOffset" dur="7s" from="0" to="500" repeatCount="indefinite" />
        Orbiting Text
    </textPath>
</text>

Oh, and if you are worried about cross-browser compatibility, check out this site: http://code.google.com/p/svgweb/