JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<div id=circles_container>
<canvas id=circles_canvas></canvas>
</div>

JavaScript

$("#circles_container").on("click", "#circles_canvas", function(event) {
        var canvas = document.getElementById('circles_canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            var w = 14;
            var x = event.pageX;
            var y = Math.floor(event.pageY-$(this).offset().top);
            
            ctx.beginPath();
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.arc(x, y, w, 0, 4 * Math.PI, false);
            ctx.fill();

            ctx = canvas.getContext("2d");
            ctx.font = '12px bold Calibri';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.fillText('100', x, y+3);
        }
    });