JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="type"></div>
<canvas id="ctx2" width="500" height="500" style="border: solid 1px;"></canvas>
<script>
var ctx = document.getElementById("ctx2").getContext("2d");
//var message = 'Hello John, this is your canvas.';
//ctx.fillStyle = 'red';
//ctx.font = '30px Arial';
//ctx.opacity = 0;
//ctx.fillText(message,50,50);
var circle = {x:100,y:75, r:50};
 
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.r,0,2*Math.PI);
ctx.stroke();

function displayDate() {
	  var date = new Date();
    document.getElementById("type").innerHTML = date.getSeconds();
}

 function checkBoundaries(x,y){
     var clicked = false;
     if(x >=circle.x - circle.r && x <= circle.x+circle.r){
       if(y >= circle.y- circle.r && y <= circle.y+circle.r){
         clicked = true;
       }
     }
     return clicked;
 }  
 
 var canvas = document.getElementsByTagName("canvas")[0];
 
 function clickHandler(e){
 
     var x = e.pageX ? e.pageX:  e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      var y = e.pageY ? e.pageY:  e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      x -= canvas.offsetLeft;
      y -= canvas.offsetTop;

      if( checkBoundaries(x,y) ){
        displayDate()
        
      }

 }
 
 canvas.addEventListener('click', clickHandler)
 
 

document.getElementById("type").innerHTML = typeof ctx


</script>
</body>