JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="main_canvas">
Your browser does not support the HTML 5 Canvas element. 
</canvas>


<script>
    canvas = document.getElementById("main_canvas");
context = canvas.getContext("2d");
    
context.canvas.width  = 300;
context.canvas.height = 300;
canvas.width = 300;
canvas.height = 300;

var eventDisplay = "Mouseover Text";
var mouseX, mouseY, pointPath;

function drawEventDisplay() {
    context.font = "10pt arial";
    context.fillStyle = "black";
    context.fillText(eventDisplay, 5, 12);
};

window.onload = function() {
    main_loop();
    setInterval("main_loop()",30);
};

canvas.onmousemove = function(e) {

    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    } else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
    eventDisplay = "X: " + mouseX + " Y: " + mouseY + " | Path: " + pointPath + "  Path2: " + pointPath2;
};

function main_loop() {
    context.clearRect ( 0 , 0 , context.canvas.width , context.canvas.height );
    
    context.beginPath();
    context.lineWidth = 0;
    context.strokeStyle = "rgba(0,0,0,0.7)";
    context.fillStyle = "rgba(120,120,255,0.7)";    
    context.arc((context.canvas.width / 2), (context.canvas.height / 2), (context.canvas.height / 4), 0, 2 * Math.PI);
    context.closePath();                
    context.fill();
    context.stroke();
    
    pointPath = context.isPointInPath(mouseX,mouseY);
    
    context.beginPath();
    context.lineWidth = 0;
    context.strokeStyle = "rgba(0,0,0,0.7)";
    context.fillStyle = "rgba(255,120,120,0.7)";    
    context.arc((context.canvas.width / 3), (context.canvas.height / 3), (context.canvas.height / 5), 0, 2 * Math.PI);
    context.closePath();                
    context.fill();
    context.stroke();
    
    pointPath2 = context.isPointInPath(mouseX,mouseY);
    
    drawEventDisplay();
};

</script>