Create a text inside circles in HTML5 Canvas

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

context.beginPath();

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>

Nishtha Thakur

Updated on 29-Jan-2020 10:52:50

• Related Questions & Answers
• Properties to create text using HTML5 Canvas
• Display video inside HTML5 canvas
• HTML5 Canvas Circle Text
• Create a pattern with HTML5 Canvas
• How to add text inside a Tkinter Canvas?
• Draw part of an image inside HTML5 canvas
• HTML5 Canvas Text Stroke for Large Font Size
• Measure text height on an HTML5 canvas element
• Properties for HTML5 Canvas to create shadows
• Print a HTML5 canvas element
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation
• Creating a LabelFrame inside a Tkinter Canvas
• How to create a canvas with text cursor using FabricJS?