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>
Updated on: 2020-01-29T10:52:50+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements