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

Question

所以我正在绘制一幅画布的世界地图。我希望这个世界地图通过使用arc方法绘制圆来动态绘制事物的坐标。我将世界地图绘制到画布上，获取画布的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