I'm attempting to have a canvas print circles one by one at coordinates provided in a database. Currently it works by printing all the circles at the 'same time', so the next part is to have them print one by one so the user can watch. It's a little messy with the JavaScript embedded in the php while loop. I imagine a more efficient way to pass the data to javascript would be to use JSON, but this is just a quick thing I've thrown together to see what's possible.
I tried setting a timeout around the code that draws the circle, but all this did was delay the process by the set time before drawing all the circles together as opposed to delaying each time it went round the loop. I also tried php code sleep(1) within the loop which had a similar outcome.
Is this related to JavaScript being client side and php server side?
<?php
// Create connection
$conn = mysqli_connect($servername, $username, $password, $db);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
echo "<br/>";
echo "<br/>";
?>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<?php
$sql = "SELECT xcoord, ycoord FROM population LIMIT 10";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result)) {
$xcoord = $row['xcoord'];
$ycoord = $row['ycoord'];
?>
<script>
var x = "<?php echo $xcoord; ?>";
var y = "<?php echo $ycoord; ?>";
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(x, y, 5,0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
<?php
}
mysqli_close($conn);
?>
