Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
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?



Like


More From » html

 Answers
44

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:



Sample


[#92150] Wednesday, May 18, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tylerdamiena

Total Points: 139
Total Questions: 90
Total Answers: 118

Location: Liechtenstein
Member since Wed, Dec 8, 2021
3 Years ago
tylerdamiena questions
;