makeCircle = function(siteId, fillColor, gps, angleX, angleY, lineColor){
    var canvas  = document.getElementById(siteId);
    var context = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius  = 10;

    if(fillColor == "lp"){
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, Math.PI, false);
      context.fillStyle = "#1E90FF";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "#1E90FF";
      context.stroke();

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, Math.PI, true);
      context.fillStyle = "#00FF00";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "#00FF00";
      context.stroke();
      
    }else{
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = fillColor;
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = fillColor;
      context.stroke();
    }
    
    if(gps == '1'){
    context.beginPath();
      context.moveTo(centerX,centerY);
      context.lineTo(angleX,angleY);
      context.lineWidth = 2;
      context.strokeStyle = lineColor;
      context.stroke();
    }

};

makeCirclesFromJSON = function(circles){
  for(i=0; i<circles.length; i++) {
    makeCircle(circles[i][0], circles[i][1], circles[i][2], circles[i][3], circles[i][4], circles[i][5]);
  }
}