JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "demo">
   <canvas id = canvas1></canvas>
</div>

JavaScript

$(document).on("click", "#canvas1", function(event) {
    console.log(1)
   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('33333333333333333', x, y+4);
      }
});