I have a Canvas and I already drew my circles there (centers and radius from MySQL DB). Also, the circles are filled in red under some conditions (from DB).

Now I have to do this:

when the user clicks on a red circle, I should show a popup (I thought to an alert) with data taken from MySQL

I'm already able to locate, with Javascript, the coordinates of the pixel the user clicks and I'm able to get the color of that pixel.

What I would need is:

if the pixel is red I should pass that info to PHP (same page) and then I should get some data from DB.

I found lots of functions on the web, Ajax or JQuery, but I'm really unable to integrate into my PHP...

my relevant code below:

//this Js function get the coordinates and the color of the pixel where the user clicks

<script language="javascript">
    function getCursorPosition(canvas, event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        //console.log("x: " + x + " y: " + y);
        
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        
        var pixel = ctx.getImageData(x, y, 1, 1).data; 
        var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);
        
        alert("x: " + x + " y: " + y + " hex: " + hex);
    }
</script>

...

// draw the canvas and listen for the event mousedown

<?php
    echo("<div id='text' style='text-align:center;'>");
    echo("<canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>");
?>
    <script>
        var canvas = document.getElementById('myCanvas'); 
        canvas.addEventListener("mousedown", function (e) { getCursorPosition(canvas, e);});
    </script>
<?php
    echo("</div>"); 
    

...

//loop getting centers and radius from DB and draws the circles on the canvas

$sqltextval = "SELECT * FROM table WHERE col='somevalue'";
$connval = mysqli_query($id,$sqltextval);
if ($rowval = mysqli_fetch_object($connval))
{
    //fill circle in red
    echo("<script type='text/javascript'>");
    echo("fill_circle($X, $Y, $radius);");
    echo("</script>;");
} 
else
{
    //circle not filled in
    echo("<script type='text/javascript'>");
    echo("draw_circle($X, $Y, $radius);");
    echo("</script>;"); 
}