The Canvas display and the IMDV display both make use of a Canvas Glyph mechanism that provides a declarative specification for making some drawing in an HTML canvas and its subsequent display.
Glyph Basics
There can be one or more glyphs and they take the form:
<glyph type>,attr1=value1,attr2=value2,...
<glyph type>,...  
...
<glyph type>,...
Where the type can be one of label, circle, rect, image, gauge, 3dbar, axis,tile, vector. e.g.:
3dbar,pos:sw,dx:10,dy:-5,height:100,width:8,baseHeight:5,sizeBy:atmos_temp,sizeByMin:0,sizeByMax:50
label,font:6pt,pos:ne,dx:90,dy:-90,label:Temp: ${atmos_temp}
Positioning Glyphs
The glyphs draw themselves into a canvas with a specified canvas width and canvas height. If they are being used in the Canvas display then the canvas width and height are specified as attributes of the display, e.g.:
{{display_canvas canvasWidth=100 canvasHeight=100}}

Each of these glyphs is positioned within the canvas based on the attributes for the glyph.
  • pos:n or nw or w or sw or s or se or e or ne
    This is the position on the bounding rectangle for the glyph.
  • dx,dy: These are the delta x and delta y values which are applied to the origin of the canvas where the origin is the lower left corner of the canvas. These can be either positive or negative integer values but can also be the following literal values:
    • canvasWidth,-canvasWidth: the width of the canvas
    • canvasWidth2,-canvasWidth2: half the width of the canvas
    • canvasHeight,-canvasHeight: the height of the canvas
    • canvasHeight2,-canvasHeight2: half the height of the canvas
There are shorthand names for the above- cw = canvasWidth, ch = canvasHeight, cw2 = canvasWidth2, ch2 = canvasHeight2

For example, if you want a label positioned in the center. You would specify:
label,pos:c,dx:cw2,dy:ch2,label:Some label
If you want to have a label that is position in the upper right of a canvas of width and height 100. To do this specify the following. The dy=-90 takes into account the approximate height of the text block.
label,pos:ne,dx:100,dy:-90,label:Some label
Glyphs in the IMDV map
The following diagram shows how the label and the image are layed out for the IMDV map example. The canvas dimensions are 300x100. The origin of the canvas is the lower left with positive X to the right and negative Y going up. The "pos" is the position on the glyph which is positioned relative to the origin and can take on the values: nw,w,sw,s,se,e,ne,n,c (center). The dx and dy are the delta from the origin. These can be absolute values as well as can be based on the canvas width and height -cw & ch and the half the canvas width and height -cw2 & ch2.

../imdv/images/canvas1.png?version=616
The data entries can have default glyph specifications. For example, the default display of the Purple Air sensors in an IMDV map is defined with:

Properties:
fontSize:0px,iconSize:20,canvasWidth:100,canvasHeight:100,font:28px sans-serif,defaultField:pm2.5
And Glyphs:
label,pos:c,dx:cw2,dy:-ch2,label:${${_field}}

#The circle is colored by the selected field with the given color table and min/max range
circle,width:cw-10,height:ch,pos:c,dx:cw2,dy:-ch2,colorBy:${_field},colorTable:airquality,colorByMin:0,colorByMax:300

The positioning is as follows:
../imdv/images/canvas2.png?version=616
The display of the NWS Weather entries in an IMDV map is defined with:

Properties:
iconSize:75,canvasWidth:600,canvasHeight:250,fill:#efefef,borderWidth:2,borderColor:#000,font:bold 36px sans-serif
With Glyphs defined as:
image,pos:nw,dx:10,dy:-ch+10,width:60,height:60,url:/repository/point/noaalarge.png
label,pady:5,pos:nw,dx:80,dy:-ch+10,label:${entryname}  
label,pady:10,pos:n,dx:cw2,dy:-ch+60,font:36px sans-serif,label:${temperature prefixLabel=true}
${windspeed prefixLabel=true}
Pressure: ${barometricpressure scale=0.01 decimals=1} mb
Here there are 2 labels - the name of the entry and a 3 new line separated field values. This gives:
../imdv/images/canvas3.png?version=616
Glyphs in the Canvas display
If the glyphs are being used in the Canvas Display then each line is specified in the display_canvas tag as:
glyph1="<glyph type>,..."
glyph2="<glyph type>,..."  
...
glyphN="<glyph type>,..."
e.g.:
glyph1="3dbar,pos:sw,dx:10,dy:-5,height:100,width:8,baseHeight:5,sizeBy:atmos_temp,sizeByMin:0,sizeByMax:50"
glyph2="label,font:6pt,pos:ne,dx:90,dy:-90,label:Temp: ${atmos_temp}"
For example, below is a canvas display that shows network statistics for a set of instruments.
images/canvasglyphs.png?version=616
The display is specified with the following.
...
#Ranges for the color table
colorByMin="0" colorByMax="720"
#define the canvas dimensions
canvasWidth=175 canvasHeight=80  
#The sw corner of the label is origin.x+60, origin.y-10
#the _colon_ is replace with ":"
glyph1="label,pos:sw,dy:-10,dx:60,label:network_colon_ ${network_minutes}
data_colon_ ${data_minutes}
ldm:${ldm_minutes}"
#The sw corner of the first bar is origin.x+10 origin.y
#The 3dbar has a width of 8 and a minimum height of 5
#The height of the bar is sizeBy percentage*30
glyph2="3dbar,pos:sw,dx:10,dy:0,height:30,width:8,baseHeight:5,sizeBy:network_minutes,colorBy:network_minutes"
glyph3="3dbar,pos:sw,dx:25,dy:0,height:30,width:8,baseHeight:5,sizeBy:data_minutes,colorBy:data_minutes"
glyph4="3dbar,pos:sw,dx:40,dy:0,height:30,width:8,baseHeight:5,sizeBy:ldm_minutes,colorBy:ldm_minutes"
...