HTML5 Canvas Circle Text

To create a text inside circles in canvas, use the −

context.beginPath();

Example

The following is the canvas −

$("#demo").on("click", "#canvas1", function(event) {
   var canvas = document.getElementById('canvas1');
      if (canvas.getContext) {
         var context = canvas.getContext("2d");
         var w = 25;
         var x = event.pageX;
         var y = Math.floor(event.pageY-$(this).offset().top);
         
         context.beginPath();
         context.fillStyle = "blue";
         context.arc(x, y, w/2, 0, 2 * Math.PI, false);
         context.fill();
         context = canvas.getContext("2d");
         context.font = '9pt';
         context.fillStyle = 'white';
         context.textAlign = 'center';
         context.fillText('amit', x, y+4);
      }
});

HTML

<div id = demo>
   <canvas id = canvas1></canvas>
</div>

Ankith Reddy

Published on 06-Apr-2018 06:54:15

• Related Questions & Answers
• Circle Collision Detection HTML5 Canvas
• Properties to create text using HTML5 Canvas
• HTML5 Canvas Text Stroke for Large Font Size
• Create a text inside circles in HTML5 Canvas
• Measure text height on an HTML5 canvas element
• Draw a circle filled with random color squares on HTML5 canvas
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation
• HTML5 Canvas Transformation Matrix
• HTML5 Canvas Degree Symbol
• How to prevent text select outside HTML5 canvas on double-click?
• HTML5 Canvas Font Size Based on Canvas Size
• HTML5 Canvas to PNG File
• Display video inside HTML5 canvas