With dojo, it is possible to draw arbitrary shapes. You can do this by creating a drawing surface, and then invoking drawing methods on that surface. These methods include:

• createLine({ x1, y1, x2, y2})
• createPolyline([{x,y}, {x,y}, {x,y}]).setFill(null)
• createPolyline([{x:1,y:1}, {x,y}, {x,y}, {x:1,y:1}]).setFill([])
• createRect({ x, y, height, width })
• createCircle({ cx, cy, r })
• createEllipse({ cx, cy, rx, ry})

There are also methods for placing images and text on a drawing surface. See the dojox test and demo files that are part of a dojo installation, such as dojox/gfx/tests/test_gfx.html, dojox/gfx/tests/test_text.html, dojox/gfx/tests/test_image1.html for more examples. Here are some examples of how to draw shapes with dojox.gfx:

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
  // createSurface(DOMnode,width,height) 
  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>

A Square and a Rectangle

<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> 

    // createRect({}) parameters
    //             x: horizontal offset from left side of surface
    //             y: vertical offset from top of surface
    //             height, width: dimensions of rectangle

<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>

A line, a polyline, and some polygons.

// 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">
  var surface3 = dojox.gfx.createSurface(dojo.byId('drawing_surface3'),200,200);
  // createLine takes parameters 
  //     x1,y1 for the coordinate of one end point and
  //     x2,y2 for the coordinate of the other end point.
  var line = surface3.createLine({ x1: 25, y1: 5, x2: 20, y2: 35 })
            .setStroke({ color: 'blue', width: 2})
            ;
  // createPolyline takes an array [] of pairs of points {x:,y:} 
  //    that define the points making up the line.
  var polyline = surface3.createPolyline([{ x: 55, y: 5}, { x: 50, y: 35 }, {x: 80, y: 10 }])
            .setFill(null)
            .setStroke({ color: 'blue', width: 2})
            ;
  // To create a closed polygon with a border, use createPolyline
  // with the same values for the first and last points in the array
  // then call setStroke().
  var polygon = surface3.createPolyline([{ x: 125, y: 5}, { x: 120, y: 40 }, { x: 180, y: 32 }, { x: 190, y: 10 }, {x: 125, y: 5}])
            .setFill([22,200,20,1])
            .setStroke({ color: 'blue', width: 2})
            ;
  // To create a filled polygon without line on the border, you
  // can use createPolyline, not close the polygon and invoke
  // setFill() without setStroke() or with setStroke(null).
  var polygon = surface3.createPolyline([{ x: 225, y: 5}, { x: 230, y: 45  }, { x: 260, y: 46 }, { x: 285, y: 20 }, {x: 260, y: 5}])
            .setStroke(null)
            .setFill([22,200,20,0.9])
            ;
</script>

The border of the shape (or the stroke of the line) can be set with setStroke() which takes parameters color, width, style, cap. Styles include: "Solid", "ShortDash", "ShortDot", "ShortDashDot", "ShortDashDotDot", "Dot", "Dash", "LongDash", "DashDot", "LongDashDot", "LongDashDotDot", with "Solid" as the default. Width is the pen width of the line in pixels, with 1 as a default.