HTML5 Canvas Circle Text

by

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 Output

More Related Contents:

  1. Capture HTML Canvas as gif/jpg/png/pdf?
  2. Maximum size of a element
  3. Get a pixel from HTML Canvas?
  4. Can I turn off antialiasing on an HTML element?
  5. Zoom Canvas to Mouse Cursor
  6. Resize image with javascript canvas (smoothly)
  7. How to draw an inline svg (in DOM) to a canvas?
  8. Convert SVG to PNG with applied images as background to svg elements
  9. Any way to clone HTML5 canvas element with its content?
  10. Best way to detect that HTML5 is not supported
  11. Capture frames from video with HTML5 and JavaScript
  12. Text wrap in a element
  13. How to resize html canvas element?
  14. JavaScript: getting ImageData without canvas
  15. jQuery equivalent of getting the context of a Canvas
  16. make canvas as wide and as high as parent
  17. How to determine the intended frame-rate on an html video element
  18. HTML5 responsive canvas: resizing the browser canvas draw disappear
  19. HTML canvas – drawing disappear on resizing
  20. getting mouse position with javascript within canvas
  21. Is there a way to curve / arc text using CSS3 / Canvas
  22. dotted stroke in
  23. clearRect not working
  24. canvas getContext(“2d”) returns null
  25. clearing circular regions from HTML5 Canvas
  26. draw 10,000 objects on canvas javascript
  27. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  28. Body animation isn’t smooth
  29. Creating a Clickable Grid in a Web Browser
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment