Tengo un Canvas y ya dibujé mis círculos allí (centros y radios de MySQL DB). Además, los círculos se rellenan en rojo bajo algunas condiciones (de DB).

Ahora tengo que hacer esto:

cuando el usuario hace clic en un círculo rojo, debería mostrar una ventana emergente (pensé en una alerta) con datos tomados de MySQL

Ya puedo ubicar, con Javascript, las coordenadas del píxel en el que hace clic el usuario y puedo obtener el color de ese píxel.

Lo que necesitaría es:

si el píxel es rojo, debería pasar esa información a PHP (misma página) y luego debería obtener algunos datos de DB.

Encontré muchas funciones en la web, Ajax o JQuery, pero realmente no puedo integrarlas en mi PHP...

mi código relevante a continuación:

// esta función Js obtiene las coordenadas y el color del píxel donde el usuario hace clic

 <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>

...

// dibuja el lienzo y escucha el evento 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>");

...

//bucle obteniendo centros y radios de DB y dibuja los círculos en el lienzo

 $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>;"); }