With dojo, it is possible to draw arbitrary shapes and then use styles to place the drawings at arbitrary locations on a web page. This means it is possible to use dojo to draw on top of an image in the web browser client (as opposed to manipulating the image before delivery on the server).

Step 1: Draw a circle

Create a drawing surface, then draw a shape (a circle in this case) on that surface.

// first, in the document head, include the dojox.gfx library
<script type='text/javascript'>
   dojo.require('dojox.gfx');
</script>

<div id=drawing_surface></div>
<script type="text/javascript">
  // create a drawing surface (50 pixels square) on an existing div
  var surface = dojox.gfx.createSurface(dojo.byId('drawing_surface'),50,50);
  // draw a circle on that surface, centered at 25,25 
  // fill it with a 90% transparent blue
  // draw the circle with a 2 pixel wide blue line
  var circle = surface.createCircle({ cx: 25, cy: 25, r: 22})
               .setFill([0,0,255,0.1])
               .setStroke({ color: 'blue', width: 2})
               ;
</script>

Step 2: Use style positioning to overlay the circle on an image

Create an enclosing container with its position set as relative, then include the image within it, then absolutely position the drawing surface so that it's upper left corner is at the same place as the upper left corner of the image. Drawings can now be created on the drawing surface and will overlay the image, with a coordinate system that starts in the upper left corner of the image and has x increasing to the right (in the image width direction), and y increasing downwards (in the image height direction). As we are drawing a circle, we specify its coordinates with cx and cy for the center of the circle and r for the radius.


<div id='relative_container' style=' position: relative; '>
   <img src='image.png' height=126 width=179 >
   <div id=drawing_surface style=' position: absolute; top: 0px; left: 0px; '></div>
</div> 

<script type="text/javascript">
  // createSurface(node,width,height) 
  // if the height and width are the same or larger than the image, they
  // will trap mouse clicks, so that right clicking on the image won't bring
  // up the view image option.  This may or may not be desirable.
  var surface = dojox.gfx.createSurface(dojo.byId('drawing_surface'),179,126);
  // cx, cy are the center of the circle, in pixels 
  // in the image's coordinate system, starting in the upper left corner.
  var circle = surface.createCircle({ cx: 38, cy: 42, r: 22})
                .setFill([0,0,255,0.1])
                .setStroke({ color: 'blue', width: 2})
                ;
</script>