Рисовать точки на основе количества строк в таблице базы данных в javascript

Я пытаюсь рисовать точки на своем холсте. количество точек, которые должны быть нарисованы на моем холсте, будет основано на количестве строк в моей таблице базы данных, которая названа как образец. моя проблема в том, что я ничего не получаю

function draw()
        {
          canvas = document.getElementById('canvas');
          ctx = canvas.getContext('2d');
          ctx.fillStyle = "black";

          <?php
          $conn = new mysqli("localhost", "root", "","login");
          if ($conn -> connect_error) {
            die($conn -> connect_error);
          }

          $query = "SELECT COUNT(1) FROM sample";
          $result = mysqli_query($conn, $query);

          ?>

          var val = "<?php echo $result ?>";
          alert(val);

          for(var i = 0; i < val; i++)
          {
            var x = Math.random()*500;
            var y = Math.random()*300;
            ctx.beginPath();
            ctx.arc(x , y, 2, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

          }

Я попытался разместить alert (), чтобы узнать, был ли выполнен мой запрос, но все равно я не получаю никаких результатов