title: Plot x and y coordinates on an image using javascript
body: <p>I want to plot x and y coordinates on an image by drawing a circle around the point. 
  I am getting the image from the server as an array buffer. After the image is displayed i need to mark the corners in the image using coordinates sent as a json from a service.
  How can i do this using javascript jquery?
  I was thinking of doing the same by overlaying the image with a canvas layer.
  How can i implement this?</p>
  
  <p>I have tried the below method but the points were getting plotted outside the image</p>
  
  <pre><code>jQuery('#plotCoordinates').on('click',function(){
  
  
          jQuery.getJSON( "plot.json", function( response ) {
              console.log("response &gt;&gt; " ,response);
              var imageCanvas = $('#imageCan');
  
  
              jQuery.each(response,function(i,obj){
                  console.log('obj &gt;&gt; ',obj);
                  point = $('&lt;div class="plot-point"&gt;&lt;/div&gt;');
                  x = obj.x,
                          y = obj.y;
  
                  point.css({
                      left: x + "px",
                      top: y + "px"
                  });
                  point.appendTo(imageCanvas);
              });
          });
      });
  </code></pre>