HTML5 Canvas Circle Text

Question

How do I create circle text (text in a circle shape) with canvas?

Answer 1

It's my modification of this: http://jsfiddle.net/Brfp3/3/ But feature allows you to display text clockwise and counterclockwise.

function textCircle(text,x,y,radius,space,top){
           space = space || 0;
           var numRadsPerLetter = (Math.PI - space * 2) / text.length;
           ctx.save();
           ctx.translate(x,y);
           var k = (top) ? 1 : -1; 
           ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space));
           for(var i=0;i

Sample usage:

ctx.font = "bold 30px Courier";
textCircle("Half circle Text",150,150,75,Math.PI/12,1);
textCircle("Half circle Text",150,150,75,Math.PI/12);