161
rated 0 times
[
163]
[
2]
/ answers: 1 / hits: 18599
/ 13 Years ago, thu, may 19, 2011, 12:00:00
How do I create circle text (text in a circle shape) with canvas?
More From » html
How do I create circle text (text in a circle shape) with canvas?
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: