рисовать точки на запрашиваемом изображении с помощью js

Question

Я хочу построить точки на моем запрашиваемом изображении, используя js, но основываясь на моем коде, нет точек, где я рисую на холсте, какая-нибудь помощь, что я должен сделать, чтобы точки появились на моем изображении?

<!--call $img query to display image-->
<?php if(isset($img) && mysqli_num_rows($img)) : ?>
    <?php while($row = mysqli_fetch_assoc($img))
    {
        //the variable for the map_image_filepath stored in database
        $filepath = $row['map_image_filepath'];?>
        <div id="canvas"><?php echo "<input type='image' src='{$filepath}'
                    name='foo' style='cursor:crosshair; border-right: #000000 2px outset;  border-bottom: #000000 2px outset; border-left: #000000 2px outset; border-top: #000000 2px outset;' height='300px' width='400px'>";?>

        <script src = "jquery.min.js"></script>
        <script>
            var canvas = null;
            var context = null;
            var imageObj = null;

            window.onload = function(){
                canvas = document.getElementById('canvas');
                context = canvas.getContext('2d');
                imageObj = new Image();

                var image = document.getElementById(canvas).value;
                imageObj.src = image;
                context.drawImage(imageObj, 0, 0);

                draw();
            }

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

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