how to pass a value from Js to PHP within the same page

Question

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

Since JS runs on the client side and PHP server-side, you'd need to make an AJAX request to the server, process that in PHP, then send the response back and respond with JS. — mykaf, Nov 15 '21 at 14:51
All of the code you have above is for your canvas-generation, but the problem is with server/client communication. What have you tried with client/server communication? The code you want to use with it is irrelevant if it doesn't try to solve the question you're posting about. — HoldOffHunger, Nov 15 '21 at 14:53
"*I found lots of functions on the web, Ajax or JQuery, but I'm really unable to integrate into my PHP*" - that's the right way to do it, so show us what you've tried, where you got stuck, what happens ... — Don't Panic, Nov 15 '21 at 15:01

mplungjan · Accepted Answer · 2021-11-15T15:11:08.487

I suggest you try fetch

const componentToHex = c => {
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex
};
const rgbToHex = (r, g, b) => "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);


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

  return "x: " + x + " y: " + y + " hex: " + hex;
}

var canvas = document.getElementById('myCanvas');
canvas.addEventListener("mousedown", function(e) {
  const pos = getCursorPosition(canvas, e);
  console.log(pos); 
  // uncomment next line to send to server
  // fetch('server.php?' + new URLSearchParams({ pos: pos }))
});

<div id='text' style='text-align:center;'>
  <canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>
</div>

ah ok thanks, then it's the name of the php file containing this code right? — Ale MaDaMa, Nov 15 '21 at 16:18

how to pass a value from Js to PHP within the same page

1 Answers1