JSFiddle - React, Tailwind, and code Playground

by stackmanoz

HTML

<body> 
    
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="circle">

    </canvas>
</body>

JavaScript

jQuery(document).ready(function(){
    
     $("#circle").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

   
        var ctx= this.getContext("2d"); 
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        
     });    
    
 
})