HTML5 Canvas Circle Text

It can technically be done, but there is no built in way. You'd have to calculate an arc, and draw each letter individually along that arc, figuring out the angle and positioning yourself.

Many people end up making their own methods (like the above) for text. Heck, multiline text can't even be done by default!

EDIT: Here is a working example, piggybacking off of cmptrgeekken's work. If you upvote me, upvote him too :P

http://jsfiddle.net/c3Y8M/1/

What it looks like:

Letters should now be properly oriented:

CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){
   var numRadsPerLetter = 2*Math.PI / text.length;
   this.save();
   this.translate(x,y);
   this.rotate(startRotation);

   for(var i=0;i<text.length;i++){
      this.save();
      this.rotate(i*numRadsPerLetter);

      this.fillText(text[i],0,-radius);
      this.restore();
   }
   this.restore();
}

Sample usage:

var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "bold 30px Serif";
ctx.fillTextCircle("Circle Text ",150,150,75,Math.PI / 2);

The extra space at the end of the string adds some extra padding.

Sample output: