рисовать точки на холсте, используя координаты из базы данных

Question

Я пытаюсь нарисовать точки на своем холсте, используя javascript, но сначала мне нужно вызвать мои координаты x и y из базы данных с помощью php и сохранить их в многомерном массиве, прежде чем рисовать их с помощью js.

Вот мой код, и моя проблема в том, что я получаю чистый холст или, другими словами, на моем холсте не рисуется никаких точек

<?php
    $conn = mysqli_connect("localhost","root","","login");
    // Check connection
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $query = "SELECT * FROM sample";

    if ($result = mysqli_query($conn,$query)) {
        echo 'var points=[';
        foreach( $result as $row ) {
            echo "{x:${row['x']}, y:${row['y']}},";
        }
        echo "];\n";
        mysqli_free_result($result);
    }
    mysqli_close($conn);
?>

for(var p in points) {
    ctx.beginPath();
    ctx.arc(p.x , p.y, 2, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
 }

Answer 1

Не эксперт в php, но этот код работает:

<?php
$conn = mysqli_connect("localhost","root","","login");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query = "SELECT * FROM sample";

if ($result = mysqli_query($conn,$query)) {
  // Fetch one and one row
    $array=array();
    while ($row=mysqli_fetch_array($result, MYSQL_ASSOC))
    {
    array_push($array,[$row['x'],$row['y']]);
    }
 }
 mysqli_free_result($result);
 mysqli_close($conn);
 ?>
 <script>
 var canvas=document.getElementById('mon_canvas');
 var ctx=canvas.getContext('2d');
 var points =<?php echo json_encode($array) ?>;
 alert(points);
 for(var i=0;i<points.length;i++) {
    ctx.beginPath();
    ctx.arc(points[i][0] , points[i][1], 2, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
 }
 </script>  
 </body>
 </html>