title: Draw bullets/circles on an Image given image coordinates
body: <p>Hi I have a R shiny app displaying an image. I would like to draw a bullets/circles on an image based on image coordinates. The image coordinates are being read from a data frame where I would like to iterate over every row, plot and then remove the coordinates drawn for every iteration.</p>
  
  <p>I have something like this now</p>
  
  <pre><code>#UI
  UI &lt;- function(id) {
  fluidPage(
  useShinyjs(),
  
  fluidRow(
    column(width=12,
           box(title='Select', width = NULL, closable = TRUE,
                   actionButton("draw", "draw"))
    )),
  
  fluidRow(width=7,
           align="center",
           box(title='Draw', width=7, height = NULL,
               imageOutput("sample")
               )
           )
    )
  }
  #server
  Server &lt;-function(input, output, session) {
   useShinyjs()
  
  #loop to iterate over every x,y coordinate value in data frame
   for(i in 1:nrow(data))
  {
      x = data[i,1]
      y = data[i,2]
      #how do I draw these coordinates values on the below displayed image and clear 
      #the drawn figures every iteration something like addCircles() and clearShapes() in 
      #leafletProxy() used for drawing figures on maps
  }
   observeEvent(input$draw, {
   output$sample&lt;--renderImage({
   list(src = "www/data/test.png",
        contentType = 'image/png',
        width = 700,
        height = 400)
    }, deleteFile = FALSE
    )
   }
  </code></pre>
  
  <p>Note: My original image is 1920x1080 and the image coordinates are accoding to these dimensions and I want to display the image in the app with custom width and height, like I have above(700x400).</p>