JSFiddle - React, Tailwind, and code Playground

by Fernando Souza

HTML

<body> 
    <h2 id="status2">0, 0</h2>
    <canvas id="special">Not supported</canvas>
</body>

CSS

#special {
    width: 500px;
    height: 500px;
    border:1px ridge green;
}

JavaScript

jQuery(document).ready(function(){
    $('#special').attr('height', $('#special').css('height'));
    $('#special').attr('width', $('#special').css('width'));
    
    $("#special").click(function(e){ 

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

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

        $('#status2').html(x +', '+ y); 
   });
})