使用JS在查询图片Canvas上绘制点失败，寻求解决方法

我帮你排查了代码里的几个关键问题，修改后就能让点成功显示在图片上了。先看看问题出在哪：

• 你把<div id="canvas">当成了Canvas元素，但<div>没有Canvas的绘图上下文（getContext方法），根本没法用来绘制图形。
• 获取图片资源的方式错误：document.getElementById(canvas).value这行逻辑完全不对，你需要正确拿到input图片的src属性。
• 图片加载是异步操作，直接在window.onload里调用draw()，可能图片还没加载完成就开始绘制，导致看不到效果。
• draw函数里重复获取上下文，而且原代码里的canvas变量指向的是div，自然无法完成绘制。

下面是修改后的完整代码：

<!--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 class="image-container">
        <!-- 隐藏原始input图片，仅用于获取图片路径 -->
        <input type='image' id="source-image" src='<?php echo $filepath; ?>' name='foo' style="display:none;" height='300px' width='400px'>
        <!-- 创建真正的Canvas绘图元素 -->
        <canvas id="draw-canvas" width="400" height="300" style="cursor:crosshair; border: #000000 2px outset;"></canvas>
    </div>

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

        window.onload = function(){
            // 获取真正的canvas元素
            canvas = document.getElementById('draw-canvas');
            context = canvas.getContext('2d');
            
            // 获取隐藏的图片元素的路径
            var sourceImage = document.getElementById('source-image');
            imageObj = new Image();
            
            // 图片加载完成后再执行绘制，这是异步加载的关键处理
            imageObj.onload = function() {
                // 先把图片绘制到canvas上
                context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
                // 再调用draw函数绘制点
                draw();
            }
            
            // 设置图片路径，触发加载流程
            imageObj.src = sourceImage.src;
        }

        function draw() {
            // 复用已获取的上下文，无需重复获取
            context.fillStyle = "black";
            for(var i = 0; i < 2; i++) {
                var x = Math.random()*canvas.width;
                var y = Math.random()*canvas.height;
                context.beginPath();
                context.arc(x , y, 2, 0, 2 * Math.PI, false);
                context.fill();
                context.stroke();
                context.closePath();
            }
        }
    </script>
    <?php } ?>
<?php endif; ?>

核心修改点说明：

1. 替换Canvas元素：把原来的<div>换成真正的<canvas>元素，并设置和图片一致的宽高，这样才能启用Canvas绘图API。
2. 处理图片异步加载：给imageObj绑定onload事件，确保图片完全加载后再绘制到Canvas上，避免因图片未加载完成导致的绘制失效。
3. 正确获取图片资源：通过隐藏的input图片元素拿到合法的图片路径，再赋值给imageObj保证资源路径正确。
4. 复用绘图上下文：在window.onload中只获取一次绘图上下文，draw函数直接复用该上下文，避免重复获取可能带来的异常。

这样修改后，刷新页面就能看到Canvas上显示图片，同时随机生成的黑色小点也会成功出现在图片上啦。

内容的提问来源于stack exchange，提问作者em96