Javascript 如何在HTML5画布的图像背景上绘制圆圈？

所以我在画布上画一幅世界地图。我想让这张世界地图通过用圆弧法画圆圈来动态绘制物体的坐标。我将世界地图绘制到画布上，获取画布的URL，并且在绘制圆圈时没有错误。。。唯一的问题是在图像背景下绘制圆。这是我的密码

// The containing function is a method of an object.
createCanvas: function(done) {
  var imageObj = new Image();
  imageObj.onload = _.bind(function(){
    var canvas = document.createElement("canvas"),
        context = canvas.getContext('2d'),
        w = imageObj.width,
        h = imageObj.height;

    canvas.width = w;
    canvas.height = h;
    context.drawImage(imageObj, 0, 0, w, h);

    for(var i = 0; i < arrayOfCoords.length; i++){
       var mapPoint = arrayOfCoords[i];
       //Invoke a function that gets an object {long: x, lat: y}
       var coordinates = returnCoordinatesObject(mapPoint.long, mapPoint.lat) 
       context.beginPath();
       context.arc(coordinates, long, coordinates.lat, 10, 0, Math.PI*2, true);
       context.closePath();
       context.fill();
    }
    var canvasImage = canvas.toDataURL('image/png');
    console.log(canvasImage);
    done.call(this, canvasImage);
  }, this);
  imageObj.src="img/le-world-map.png";
},

代码没有出错，所以我猜圆圈是在地图后面画的。stackoverflow上还有其他线程提出了类似的问题，但我发现它们不清楚，无法实现建议的解决方案

Thx

---

-Gaweyne

你怎么知道画的是什么？您尚未定义填充样式，可以是透明的，但默认情况下应为黑色。你试过注释复制地图的代码了吗，看看在空白画布上发生了什么。你是对的。我有context.fillStyle=red，但出于某种原因我删除了它。把它放回去。由于某种原因，它并没有在整个数组中循环，只绘制了一个坐标圆。但是谢谢你。