WebSVN – wimsdev – Diff – /trunk/wims/public_html/scripts/help/en/canvasdraw.phtml

-<input type='text' size='10' value='' id='search' onkeydown='javascripts:if(event.keyCode == 13){look();}'/><input type='button' onclick='javascript:look();' value='search' />
+<input type='text' size='10' value='' id='search'  onkeydown='javascripts:if(event.keyCode == 13){look();}'/><input type='button' onclick='javascript:look();' value='search' />
-<h2 style=text-align:center>Implemented canvasdraw commands (16-09-2017)</h2>
+<h2 style=text-align:center>Implemented canvasdraw commands (22-09-2017)</h2>
 <table style='color:blue;font-size:0.8em;'><tr>
 <td><a name='canvasdraw top' href='#canvasdraw'>canvasdraw</a></td>
 <td><a name='affine top' href='#affine'>affine</a></td>
 <td><a name='angle top' href='#angle'>angle</a></td>
 <td><a name='snaptopoints top' href='#snaptopoints'>snaptopoints</a></td>
 <td><a name='snaptogrid top' href='#snaptogrid'>snaptogrid</a></td>
 <td><a name='square top' href='#square'>square</a></td>
 <td><a name='status top' href='#status'>status</a></td>
 <td><a name='string top' href='#string'>string</a></td>
 </tr><tr>
 <td><a name='stringup top' href='#stringup'>stringup</a></td>
 <td><a name='highlight top' href='#highlight'>highlight</a></td>
 <td><a name='strokecolor top' href='#strokecolor'>strokecolor</a></td>
 <td><a name='text top' href='#text'>text</a></td>
 <td><a name='textarea top' href='#textarea'>textarea</a></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr></table>
 <ul>
-<li><a name='canvasdraw' href='#canvasdraw top'>canvasdraw</a><ul>
+<li><a name='canvasdraw' href='#canvasdraw top'>  canvasdraw</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will try use the same syntax as flydraw or svgdraw to paint a html5 bitmap image<br />by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job.<br />thus ensuring a minimal strain on the client browser <br />(unlike some popular 'canvas-do-it-all' libraries, who have proven to be not suitable for low-end computers found in schools...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> general syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">'opacity [0-255],[0,255]'</a></il><li>line width of any object can be controlled by command <a href="#linewidth">'linewidth int'</a></li><li>any may be dashed by using keyword <a href="#dashed">'dashed'</a> before the object command.<br />the dashing type can be controled by command <a href="#dashtype">'dashtype int,int'</a></li><li>a fillable object can be set fillable by starting the object command with an 'f'<br />(like frect,fcircle,ftriangle...)<br />or by using the keyword <a href="#filled">'filled'</a> before the object command.<br />The fill colour of 'non_userdraw' objects will be the stroke colour...(flydraw harmonization 19/10/2013)<br />non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br />for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered),<br />there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>all draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li> <li> a draggable object can be set draggable by a preceding command <a href="#drag">'drag x/y/xy'</a><br />The translation can be read by javascript:read_dragdrop();The replyformat is : object_number : x-orig : y-orig : x-drag : y-drag<br />The x-orig/y-orig will be returned in maximum precision (javascript float)...<br />the x-drag/y-drag will be returned in defined 'precision' number of decimals<br />Multiple objects may be set draggable / clickable (no limit)<br /> not all flydraw objects may be dragged / clicked<br />Only draggable / clickable objects will be scaled on <a href="#zoom">zoom</a> and will be translated in case of panning</li><li> a 'onclick object' can be set 'clickable' by the preceding keyword <a href="#onclick">'onclick'</a><br />not all flydraw objects can be set clickable</li><li><b>remarks using a ';' as command separator</b><br />commands with only numeric or colour arguments may be using a ';' as command separator (instead of a new line)<br />commands with a string argument may not use a ';' as command separator !<br />these exceptions are not really straight forward... so keep this in mind.</li><li>almost every <a href="#userdraw">"userdraw object,color"</a> or <a href="#multidraw">"multidraw"</a> command 'family' may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..." </li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..." </li><li>almost every command for a single object has a multiple objects counterpart:<br /><ul>general syntaxrule:<li><em>single_object</em> x1,y1,...,color</li><li><em>multi_object</em> color,x1,y1,...</li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#inputstyle">'inputstyle some_css'</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="fontsize">'fontsize int'</a> <br />command 'fontfamily' is <b>not</b> active for these elements </li></ul>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> If needed multiple interactive scripts may be used in a single webpage.<br />A function 'read_canvas()' and / or 'read_dragdrop()' can read all interactive userdata from these images.<br />The global array 'canvas_scripts' will contain all unique random "canvas_root_id" of the included scripts.<br />The included local javascript "read" functions "read_canvas%d()" and "read_dragdrop%d()" will have this "%d = canvas_root_id"<br />e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function<br />fun = eval("read_canvas"+canvas_scripts[0]) to read user based drawings / inputfield in this first image.<br />The read_dragdrop is analogue.<br />If the default reply formatting is not suitable, use command <a href='#replyformat'>'replyformat'</a> to format the replies for an individual canvas script,<br />To read all user interactions from all included canvas scripts , use something like:<br /><em>function read_all_canvas_images(){<br />&nbsp;var script_len = canvas_scripts.length;<br />&nbsp;var draw_reply = "";<br />&nbsp;var found_result = false;<br />&nbsp;for(var p = 0 ; p < script_len ; p++){<br />&nbsp;&nbsp;var fun = eval("read_canvas"+canvas_scripts[p]);<br />&nbsp;&nbsp;if( typeof fun === 'function'){<br />&nbsp;&nbsp;&nbsp;var result = fun();<br />&nbsp;&nbsp;&nbsp;if( result&nbsp;&nbsp;&& result.length != 0){<br />&nbsp;&nbsp;&nbsp;&nbsp;if(script_len == 1 ){ return result;};<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;found_result = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_reply = draw_reply + result + "\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;};<br />&nbsp;if( found_result ){return draw_reply;}else{return null;};<br />};</em>
 <li><span style="color:blue;font-size:0.8em"> if you find flaws, errors or other incompatibilities -not those mentioned in this document- send <a href='mailto:jm.evers-at-schaersvoorde.nl'>me</a> an email with screenshots and the generated javascript include file.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is limited support for touch devices : touchstart,touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#protractor">protractor</a> and <a href="#ruler">ruler</a><br />only single finger gestures are supported (for now)<br />for more accurate user-interaction with canvasdraw on touch devices: use the command family <a href="userinput_xy">userinput</a>
 </span></li>
 </ul>
-<li><a name='affine' href='#affine top'> affine a,b,c,d,tx,ty</a><ul>
+<li><a name='affine' href='#affine top'>  affine a,b,c,d,tx,ty</a><ul>
 <li><span style="color:blue;font-size:0.8em"> defines a transformation matrix for subsequent objects
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> images drawn by setting skew params a &amp; d will be very different from Flydraw's "affine a,b,c,d,e,tx,ty" !!
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use keyword 'killaffine' to end the transformation
 <li><span style="color:blue;font-size:0.8em"> note 3: no matrix operations on the transformation matrix implemented (yet)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a : Scales the drawings horizontally
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> b : Skews the drawings horizontally
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> c : Skews the drawings vertically
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> d : Scales the drawings vertically
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> tx: Moves the drawings horizontally in xrange coordinate system
 <li><span style="color:blue;font-size:0.8em"> ty: Moves the drawings vertically in yrange coordinate system
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the data precision may be set by preceding command "precision int"
 </span></li>
 </ul>
-<li><a name='angle' href='#angle top'> angle xc,yc,width,start_angle,end_angle,color</a><ul>
+<li><a name='angle' href='#angle top'>  angle xc,yc,width,start_angle,end_angle,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> width is in x-range
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will zoom in/out
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if size is controlled by command <a href='#slider'>'slider'</a> use radians to set limits of slider.
 </span></li>
 </ul>
-<li><a name='animate' href='#animate top'> animate type</a><ul>
+<li><a name='animate' href='#animate top'>  animate</a><ul>
-<li><span style="color:blue;font-size:0.8em"> REMOVED : this should be done with a slider
+<li><span style="color:blue;font-size:0.8em"> keyword
 </span></li>
-<li><span style="color:blue;font-size:0.8em"> type may be "point" (nothing else , yet...)
+<li><span style="color:blue;font-size:0.8em"> the animated point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'
 </span></li>
-<li><span style="color:blue;font-size:0.8em"> the point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'
+<li><span style="color:blue;font-size:0.8em"> use linewidth to adjust size of the points
 </span></li>
-<li><span style="color:blue;font-size:0.8em"> will animate a point on the next plot/curve command
+<li><span style="color:blue;font-size:0.8em"> will animate a point on the next jsplot/jscurve command
 </span></li>
-<li><span style="color:blue;font-size:0.8em"> the curve will not be draw
+<li><span style="color:blue;font-size:0.8em"> only usable for command jsplot (normal functions or parametric)
 </span></li>
-<li><span style="color:blue;font-size:0.8em"> moves repeatedly from xmin to xmax
+<li><span style="color:blue;font-size:0.8em"> moves repeatedly from xmin to xmax or incase of a parametric function from tmin to tmax (set trange)
 </span></li>
 </ul>
-<li><a name='arc' href='#arc top'> arc xc,yc,width,height,start_angle,end_angle,color</a><ul>
+<li><a name='arc' href='#arc top'>  arc xc,yc,width,height,start_angle,end_angle,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: width in height in x/y-range
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will not zoom in or zoom out (because radius is given in pixels an not in x/y-system !). Panning will work
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href='#angle'>'angle'</a> for scalable angle
 </span></li>
 </ul>
-<li><a name='arrow' href='#arrow top'> arrow x1,y1,x2,y2,h,color</a><ul>
+<li><a name='arrow' href='#arrow top'>  arrow x1,y1,x2,y2,h,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='vector' href='#vector top'>vector</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='arrows' href='#arrows top'> arrows color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
+<li><a name='arrows' href='#arrows top'>  arrows color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='vectors' href='#vectors top'>vectors</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='arrow2' href='#arrow2 top'> arrow2 x1,y1,x2,y2,h,color</a><ul>
+<li><a name='arrow2' href='#arrow2 top'>  arrow2 x1,y1,x2,y2,h,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'arrowhead int' to adjust the arrow head size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='arrows2' href='#arrows2 top'> arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
+<li><a name='arrows2' href='#arrows2 top'>  arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrows
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='arrowhead' href='#arrowhead top'> arrowhead int</a><ul>
+<li><a name='arrowhead' href='#arrowhead top'>  arrowhead int</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default 8 (pixels)
 </span></li>
 </ul>
-<li><a name='audio' href='#audio top'> audio x,y,w,h,loop,visible,audiofile location</a><ul>
+<li><a name='audio' href='#audio top'>  audio x,y,w,h,loop,visible,audiofile location</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x,y : left top corner of audio element (in xrange / yrange)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> w,y : width and height in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> loop : 0 or 1 ( 1 = loop audio fragment)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> visible : 0 or 1 (1 = show controls)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> audio format may be in *.mp3 or *.ogg
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> If you are using *.mp3 : be aware that FireFox will not (never) play this ! (Pattented format)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you are using *.ogg : be aware that Microsoft based systems not support it natively
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> To avoid problems supply both types (mp3 and ogg) of audiofiles.<br />the program will use both as source tag
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example: upload both audio1.ogg and audio1.mp3 to http://server/files/<br />audio 0,0,http://server/files/audio1.mp3<br />svdraw will copy html-tag audio1.mp3 to audio1.ogg<br /> and the browser will play the compatible file (audio1.ogg or audio1.mp3)<br />
 </span></li>
 </ul>
-<li><a name='axisnumbering' href='#axisnumbering top'> axisnumbering</a><ul>
+<li><a name='axisnumbering' href='#axisnumbering top'>  axisnumbering</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> for special numbering of x-axis or y-axis see grid related commands <a href="#axis">axis</a> <a href="#xaxis">xaxis</a> , <a href="#xaxisup">xaxisup</a>, <a href="#noxaxis">noxaxis</a> ,<a href="#yaxis">yaxis</a> , <a href="#yaxisup">yaxisup</a>, <a href="#noyaxis">noyaxis</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 </ul>
-<li><a name='axis' href='#axis top'> axis</a><ul>
+<li><a name='axis' href='#axis top'>  axis</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 </ul>
-<li><a name='barchart' href='#barchart top'> barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n</a><ul>
+<li><a name='barchart' href='#barchart top'>  barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> may <b>only</b> to be used together with command <a href='#grid'>'grid'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can be used together with freestyle x-axis/y-axis texts : see commands <a href='#xaxis'>'xaxis'</a>,<a href='#xaxisup'>'xaxisup'</a> and <a href='#yaxis'>'yaxis'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href='#legend'>'legend'</a> to provide an optional legend in right-top-corner
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> multiple barchart command may be used in a single script
 <li><span style="color:blue;font-size:0.8em"> also see command <a href='#piechart'>'piechart'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: your arguments are not checked by canvasdraw : use your javascript console in case of trouble...
 </span></li>
 </ul>
-<li><a name='bezier' href='#bezier top'> bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end</a><ul>
+<li><a name='bezier' href='#bezier top'>  bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a bezier curve between points, starting from (x_start:y_start)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be dragged or set onclick
 </span></li>
 </ul>
-<li><a name='bgcolor' href='#bgcolor top'> bgcolor colorname or #hex</a><ul>
+<li><a name='bgcolor' href='#bgcolor top'>  bgcolor colorname or #hex</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use this color as background of the "div" containing the canvas(es)
 </span></li>
 </ul>
-<li><a name='bgimage' href='#bgimage top'> bgimage image_location</a><ul>
+<li><a name='bgimage' href='#bgimage top'>  bgimage image_location</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use an image as background .<br />technical: we use the background of 'canvas_div'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the background image will be resized to match "width = xsize" and "height = ysize"
 </span></li>
 </ul>
-<li><a name='blink' href='#blink top'> blink time(seconds)</a><ul>
+<li><a name='blink' href='#blink top'>  blink time(seconds)</a><ul>
 <li><span style="color:blue;font-size:0.8em"> NOT IMPLEMETED -YET
 </span></li>
 </ul>
-<li><a name='boxplot' href='#boxplot top'> boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max</a><ul>
+<li><a name='boxplot' href='#boxplot top'>  boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max</a><ul>
 <li><span style="color:blue;font-size:0.8em"> example:<br />xrange 0,300<br />yrange 0,10<br />boxplot x,4,8,120,160,170,220,245<br />meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />xrange 0,10<br />yrange 0,300<br />boxplot y,4,8,120,160,170,220,245<br />meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href='#filled'>'filled'</a> to fill the box<br /><b>note:</b> the strokecolor is used for filling Q1, the fillcolor is used for filling Q3
 <li><span style="color:blue;font-size:0.8em"> use keyword <a href="#userboxplotdata">'userboxplotdata'</a> before command boxplot, if a pupil must generate the data by some means.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#boxplotdata">'boxplotdata'</a> when the boxplot should be drawn from wims-generated raw statistical date
 </span></li>
 </ul>
-<li><a name='boxplotdata' href='#boxplotdata top'> boxplotdata some_data</a><ul>
+<li><a name='boxplotdata' href='#boxplotdata top'>  boxplotdata some_data</a><ul>
 <li><span style="color:blue;font-size:0.8em"> 'some_data' are a list of numbers separated by a comma "," (items)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only be used before command 'boxplot': the command <a href="#boxplot">'boxplot'</a> will provide the boxplot drawing of the data.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> xrange 0,100<br />yrange 0,10<br />boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23<br />boxplot x,4,5
 <li><span style="color:blue;font-size:0.8em"> note: wims will not check your data input | format. use js-error console to debug any problems.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a javascript function 'statistics()' will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function.
 </span></li>
 </ul>
-<li><a name='canvastype' href='#canvastype top'> canvastype TYPE</a><ul>
+<li><a name='canvastype' href='#canvastype top'>  canvastype TYPE</a><ul>
 <li><span style="color:blue;font-size:0.8em"> for now only usefull before commands filltoborder / floodfill / clickfill etc operations<br />Only the images of this TYPE will be scanned and filled
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use another TYPE, if you know what you are doing...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> other possible canvasses (transparent PNG pictures xsize x ysize on top of each other)<ul><li> EXTERNAL_IMAGE_CANVAS 0</li><li> BG_CANVAS 1</li><li> STATIC_CANVAS 2</li><li> MOUSE_CANVAS 3</li><li> GRID_CANVAS 4</li><li> DRAG_CANVAS 5</li><li> DRAW_CANVAS 6</li><li> TEXT_CANVAS 7</li><li> CLOCK_CANVAS 8</li><li> ANIMATE_CANVAS 9</li><li> TRACE_CANVAS 10</li><li>BOXPLOT_CANVAS 11</li><li> JSPLOT_CANVAS 100 , will increase with every call</li><li> FILL_CANVAS 200 , will increase with every call </li><li> USERDRAW_JSPLOT 300 , will increase with every call </li><li>CLICKFILL_CANVAS 400 , will increase with every call/click</li><li>BOXPLOT_CANVAS 500 , will increase with every call</li></ul>
 </span></li>
 </ul>
-<li><a name='centerstring' href='#centerstring top'> centerstring color,y-value,the text string</a><ul>
+<li><a name='centerstring' href='#centerstring top'>  centerstring color,y-value,the text string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> title color,y-value,the text string
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> draw a string centered on the canvas at y = y-value
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can not be set "onclick" or "drag xy" (...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> unicode supported: centerstring red,5,\u2232
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use a command like 'fontfamily italic 24px Ariel' <br />to set fonts on browser that support font change
 </span></li>
 </ul>
-<li><a name='circle' href='#circle top'> circle xc,yc,width (2*r in pixels),color</a><ul>
+<li><a name='circle' href='#circle top'>  circle xc,yc,width (2*r in pixels),color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use command 'fcircle xc,yc,d,color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> alternative: disk for a filled circle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fillcolor color' to set the fillcolor
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will shrink / expand on zoom out / zoom in
 </span></li>
 </ul>
-<li><a name='circles' href='#circles top'> circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n</a><ul>
+<li><a name='circles' href='#circles top'>  circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b> r = radius in x-range (!)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use keyword 'filled' or command 'fcircles' to produce solid circles
 </span></li>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='disks' href='#disks top'>disks</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fillcolor color' to set the fillcolor
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (individually)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will shrink / expand on zoom out / zoom in
 </span></li>
 </ul>
-<li><a name='clearbutton' href='#clearbutton top'> clearbutton value</a><ul>
+<li><a name='clearbutton' href='#clearbutton top'>  clearbutton value</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='delete' href='#delete top'>delete</a></span></li>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='erase' href='#erase top'>erase</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> adds a button to clear the <a href="#userdraw">userdraw</a> canvas with text 'value'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b> command 'clearbutton' is incompatible with <a href="multidraw">multidraw</a> based drawings<br/>(in 'multidraw' there is always a remove_object_button for every drawprimitive)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> normally <a href="#userdraw">userdraw</a> primitives have the option to use middle/right mouse button on<br /> a point of the object to remove this specific object...this clear button will remove all drawings
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> uses the tooltip placeholder div element: may not be used with command 'intooltip'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#inputstyle">'inputstyle'</a> to style the button...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script<br />to change the style of all "clearbutton" of all included canvasdraw scripts, use something like<br /><em>if(document.getElementById("clearbutton"+canvas_scripts[0])){<br />&nbsp;var p = 0;<br />&nbsp;while(document.getElementById("clearbutton"+canvas_scripts[p])){<br />&nbsp;&nbsp;document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";<br />&nbsp;&nbsp;&lt;!&minus;&minus; or document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); &minus;&minus;&gt;<br />&nbsp;&nbsp;p++;<br />&nbsp;};<br />};<br />
 </span></li>
 </ul>
-<li><a name='clock' href='#clock top'> clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]</a><ul>
+<li><a name='clock' href='#clock top'>  clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use command 'opacity stroke-opacity,fill-opacity' to adjust foreground (stroke) and background (fill) transparency
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> type hourglass:<br />type = 0 : only segments<br />type = 1 : only numbers<br />type = 2 : numbers and segments
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> colors are optional: if not defined, default values will be used<br />default colours: clock 0,0,60,4,35,45,1,2<br />custom colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red<br />custom colours: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> interactive <ul><li>0 : not interactive, just clock(s)</li><li>1 : function read_canvas() will read all active clocks in H:M:S format<br />The active clock(s) can be adjusted by pupils</li><li>2 : function read_canvas() will return the clicked clock <br />(like multiplechoice; first clock in script in nr. 0 )</li><li>3: no prefab buttons...create your own buttons (or other means) to make the clock(s) adjustable by javascript function set_clock(num,type,diff)<br />wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds) <br />and diff = the increment of 'type' (positive or negative) </li></ul>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> canvasdraw will not check validity of colornames...the javascript console is your best friend
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> no combinations with other reply_types allowed, for now
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if interactive is set to '1', 6 buttons per clock will be displayed for adjusting a clock (H+ M+ S+ H- M- S-)<br /> set_clock(clock_id,type,incr) <br />first clock has clock_id=0 ; type : H=1,M=2,S=3 ; incr : increment integer
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: if you need multiple -interactive- clocks on a webpage, use multiple 'clock' commands in a single script !<br />and <i>not multiple canvas scripts</i> in a single page
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: clocks will not zoom or pan, when using command <a href='#zoom'>'zoom'</a>
 </span></li>
 </ul>
-<li><a name='colorpalette' href='#colorpalette top'> colorpalette color_name_1,color_name_2,...,color_name_8</a><ul>
+<li><a name='colorpalette' href='#colorpalette top'>  colorpalette color_name_1,color_name_2,...,color_name_8</a><ul>
 <li><span style="color:blue;font-size:0.8em"> opacity will be the same for all colors and is set by command <a href="#opacity">opacity [0-255],[0-255]</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can be used with command <a href='#userdraw'>'userdraw clickfill,color'</a> when more than one fillcolor is wanted.<br />in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br />the pupil can choose from the given colors by clicking small coloured buttons.<br /> the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat.<br />the first color of the palette is color=0
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> make sure to include the 'remove button' by using command <a href='#clearbutton'>clearbutton some_text</a>
 </span></li>
 </ul>
-<li><a name='copy' href='#copy top'> copy x,y,x1,y1,x2,y2,[filename URL]</a><ul>
+<li><a name='copy' href='#copy top'>  copy x,y,x1,y1,x2,y2,[filename URL]</a><ul>
 <li><span style="color:blue;font-size:0.8em"> The image may be "bitmap" or "SVG"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
 <li><span style="color:blue;font-size:0.8em"> [filename] is the URL of the image
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> URL is normal URL of network reachable image file location<br />(eg special url for 'classexo' not -yet- implemented)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if command <a href="#drag">'drag x/y/xy'</a> is set before command 'copy', the images will be draggable<br />javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br />the command drag is only valid for the next image<br />draggable / non-draggable images may be mixed<br />may be used together with preceding keywords 'snaptogrid','xsnaptogrid','ysnaptogrid' or 'snaptopoints x1,y1,x2,y2...'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if keyword <a href="#onclick">'onclick'</a> is set before command 'copy' the image(s) is clickable (marked with a green rectangle around the image)<br />use 'read_dragdrop' to get the number of the clicked image(s)<br />use command 'clearbutton some_text' to reset the reply/click array.<br />example: 4 images; student clicked on image 2 and 3 : reply = 0,1,1,0<br />after clicking the clear button: reply = 0,0,0,0<br />May be mixed with commands 'drag x|y|xy' (use javascript read_canvas to get the new coordinates
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> 'onclick' for external images may be mixed with canvas generated stuff (like lines,curves etc)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> you may draw / userdraw / drag other stuff on top of an "imported" image
 </span></li>
 </ul>
-<li><a name='copyresized' href='#copyresized top'> copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url</a><ul>
+<li><a name='copyresized' href='#copyresized top'>  copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url</a><ul>
 <li><span style="color:blue;font-size:0.8em"> The image may be any "bitmap" or "SVG"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> Insert the region from (x1,y1) to (x2,y2) (in pixels) of [ filename], <br />possibly resized,<br />to the region of (dx1,dy1) to (dx2,dy2) in x/y-range
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> (dx1:dy1) must be left top corner; (dx2 :dy2) must be right bottom corner of inserted image
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> URL is normal URL of network reachable image file location<br />(as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif'<br />(eg no special wims paths are searched !!)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if command <a href="#drag">'drag x/y/xy'</a> is set before command 'copy', the images will be draggable<br />javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br />the command drag is only valid for the next image<br />draggable / non-draggable images may be mixed<br />may be used together with preceding keywords 'snaptogrid','xsnaptogrid','ysnaptogrid' or 'snaptopoints x1,y1,x2,y2...'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if keyword <a href="#onclick">'onclick'</a> is set before command 'copy' the image(s) is clickable (marked with a green rectangle around the image)<br />use 'read_dragdrop' to get the number of the clicked image(s)<br />use command 'clearbutton some_text' to reset the reply/click array.<br />example: 4 images; student clicked on image 2 and 3 : reply = 0,1,1,0<br />after clicking the clear button: reply = 0,0,0,0<br />May be mixed with commands 'drag x|y|xy' (use javascript read_canvas to get the new coordinates
 <li><span style="color:blue;font-size:0.8em"> 'onclick' for external images may be mixed with canvas generated stuff (like lines,curves etc)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> you may draw / userdraw / drag stuff on top of an "imported" image
 </span></li>
 </ul>
-<li><a name='crosshair' href='#crosshair top'> crosshair x,y,color</a><ul>
+<li><a name='crosshair' href='#crosshair top'>  crosshair x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a single crosshair point at (x;y) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'crosshairsize int' and / or 'linewidth int' to adust
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='crosshairs' href='#crosshairs top'> crosshairs color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
+<li><a name='crosshairs' href='#crosshairs top'>  crosshairs color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw multiple crosshair points at given coordinates in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'crosshairsize int' and / or 'linewidth int' to adust
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 </ul>
-<li><a name='crosshairsize' href='#crosshairsize top'> crosshairsize int</a><ul>
+<li><a name='crosshairsize' href='#crosshairsize top'>  crosshairsize int</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default 8 (px)
 </span></li>
 </ul>
-<li><a name='cursor' href='#cursor top'> cursor 'some CSS cursor_style'</a><ul>
+<li><a name='cursor' href='#cursor top'>  cursor 'some CSS cursor_style'</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='pointer' href='#pointer top'>pointer</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> style can be any valid CSS property value, like crosshair,grabbing,move etc
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> wims will not check the validity of your cursor declaration
 </span></li>
 </ul>
-<li><a name='curve' href='#curve top'> curve color,formula(x)</a><ul>
+<li><a name='curve' href='#curve top'>  curve color,formula(x)</a><ul>
 <li><span style="color:blue;font-size:0.8em"> alernative : plot color,formula(x)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#trange">trange</a> in parametric functions before command curve / plot (trange -pi,pi)<br />curve color,formula1(t),formula2(t)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#precision">"precision" </a>to ncrease the number of digits of the plotted points
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you need a plot beyond xrange / yrange, use <a href="#jsplot">"jsplot"'</a><br />(command "curve" will only calculate points within the xrange)
 </span></li>
 </ul>
-<li><a name='dashed' href='#dashed top'> dashed</a><ul>
+<li><a name='dashed' href='#dashed top'>  dashed</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> next object will be drawn with a dashed line
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> change dashing scheme by using command <a href="#dashtype">dashtype</a>
 </span></li>
 </ul>
-<li><a name='dashtype' href='#dashtype top'> dashtype line_width_px,space_width_px</a><ul>
+<li><a name='dashtype' href='#dashtype top'>  dashtype line_width_px,space_width_px</a><ul>
 <li><span style="color:blue;font-size:0.8em"> every indiviual object may have its own dashtype, if needed...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> When keyword <a href='#dashed'>dashed</a> is set, the objects will be drawn with this dashtype
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default value "dashtype 2,2" e.g. 2px line and 2px space
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> html5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
 </span></li>
 </ul>
-<li><a name='diamondfill' href='#diamondfill top'> diamondfill x0,y0,dx,dy,color</a><ul>
+<li><a name='diamondfill' href='#diamondfill top'>  diamondfill x0,y0,dx,dy,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x0,y0 in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> distances dx,dy in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is also a command <a href="userdraw">userdraw diamondfill,color</a>
 </span></li>
 </ul>
-<li><a name='dotfill' href='#dotfill top'> dotfill x0,y0,dx,dy,color</a><ul>
+<li><a name='dotfill' href='#dotfill top'>  dotfill x0,y0,dx,dy,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x0,y0 in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> distances dx,dy in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> radius of dots is linewidth
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is also a command <a href="userdraw">userdraw dotfill,color</a>
 </span></li>
 </ul>
-<li><a name='drag' href='#drag top'> drag [x][y][xy]</a><ul>
+<li><a name='drag' href='#drag top'>  drag [x][y][xy]</a><ul>
 <li><span style="color:blue;font-size:0.8em"> the next object will be draggable in x / y / xy direction
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the displacement can be read by 'javascript:read_dragdrop();'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the precision (default 2 decimals) in the student reply may be set with command <a href="#precision">'precision'.</a><br />Use this 'precision' command before this command 'drag x|y|xy' !
 <li><span style="color:blue;font-size:0.8em"> use keyword 'snaptogrid' , 'xsnaptogrid' , 'ysnaptogrid' or command 'snaptopoints x1,y1,x2,y2,...' to switch from free to discrete movement
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy. <br />The function javascript;read_canvas() will return the xy-coordinates of all images.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: in case an object is dragged , zooming or panning will cause the coordinates to be reset to the original position :( <br />e.g. dragging / panning will get lost. (array with 'drag data' is erased)<br />This is a design flaw and not a feature !!
 </span></li>
 </ul>
-<li><a name='ellipse' href='#ellipse top'> ellipse xc,yc,radius_x,radius_y,color</a><ul>
+<li><a name='ellipse' href='#ellipse top'>  ellipse xc,yc,radius_x,radius_y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> a ellipse with center xc/yc in x/y-range
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> radius_x and radius_y are in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will shrink / expand on zoom out / zoom in
 </span></li>
 </ul>
-<li><a name='fillall' href='#fillall top'> fillall color,x1,y1,x2,y2...x_n,y_n</a><ul>
+<li><a name='fillall' href='#fillall top'>  fillall color,x1,y1,x2,y2...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> fill all region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> any other colors (objects) in the <a href="#canvastype>canvastype</a> will act as border to the bucket fill
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use this command after all boundary objects are declared.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> Use command 'userdraw clickfill,color' for user click driven flood fill.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: the fill-family of commands are very (client) cpu intensive operations!<br />filling is done pixel by pixel<br/>e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU..
 </span></li>
 </ul>
-<li><a name='filled' href='#filled top'> filled</a><ul>
+<li><a name='filled' href='#filled top'>  filled</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the next 'fillable' object (only the next !) will be filled
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="fillcolor">"fillcolor color"</a> to set fillcolor
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use <a href="#fillpattern">fillpattern</a> for non-solid color filling.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "opacity 0-255,0-255" to set stroke and fill-opacity
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "fill x,y,color" or "floodfill x,y,color" to fill the space around (x;y) with color <br />pixel operation implemented in javascript: use with care !
 </span></li>
 </ul>
-<li><a name='fillcolor' href='#fillcolor top'> fillcolor colorname or #hex</a><ul>
+<li><a name='fillcolor' href='#fillcolor top'>  fillcolor colorname or #hex</a><ul>
 <li><span style="color:blue;font-size:0.8em"> set the color : mainly used for command 'userdraw obj,stroke_color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> all fillable massive objects will have a fillcolor == strokecolor (just to be compatible with flydraw...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> see <a href="#fillpattern">fillpattern</a> for non-solid color filling.
 </span></li>
 </ul>
-<li><a name='fillpattern' href='#fillpattern top'> fillpattern grid | hatch | diamond | dot | image-url</a><ul>
+<li><a name='fillpattern' href='#fillpattern top'>  fillpattern grid | hatch | diamond | dot | image-url</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use a pattern as fillstyle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> suitable for all fillable object including the <a href="#userdraw">'userdraw objects' family</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> noy -yet- implemented in the <a href="#multidraw">multidraw objects family</a>...(will probably be too complex)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the fillcolor is set by the object command, for example:<br />size 370,370<br />xrange -5,5<br />yrange -5,5<br />opacity 165,150<br />fillpattern grid<br />fcircle -6,3,160,blue<br />fillpattern dot<br />fcircle -3,-3,160,red<br />fillpattern hatch<br />fcircle 0,3,160,green<br />filpattern diamond<br />fcircle 3,-3,160,cyan<br />userdraw dotfill,blue<br />zoom red<br />
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the pattern dimensions are hardcoded (linewidth ,radius,dx,dy are fixed)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> see <a href="#fillcolor">fillcolor</a> for solid color filling.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> when using an image-url , make sure it contains an '/' in the filename...'fillpattern $$module_dir/gifs/test.jpg' will fill the next fillable object with this image.|<br />the argument to html5 canvas routine 'createPattern(img,argument)' is set to 'repeat'<br />e.g. if the image is smaller then the canvas, multiple copies will be used to fill the area ( e.g. ctx.fillStyle() = pattern)<br />for example:<br />size 150,150<br />xrange -5,5<br />yrange -5,5<br />drag xy<br />fillpattern gifs/en.gif<br />fcircle 0,0,100,red<br />fillpattern gifs/nl.gif<br />drag xy<br />fcircle -3,2,100,green<br />fillpattern gifs/cn.gif<br />drag xy<br />fcircle 3,2,100,green<br />
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> fillpattern is also active for <a href="#userdraw">userdraw object,color"</a>...<br />the userdraw family a has also 'clickfill type' (e.g. an object gets filled between boundaries, when clicked) commands like:<br />'userdraw dotfill,color'<br />'userdraw hatchfill,color' etc
 </span></li>
 </ul>
-<li><a name='filltoborder' href='#filltoborder top'> filltoborder x,y,bordercolor,color</a><ul>
+<li><a name='filltoborder' href='#filltoborder top'>  filltoborder x,y,bordercolor,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> fill the region of point (x:y) with color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> any other color will not act as border to the bucket fill
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use this command after all boundary objects are declared.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: filltoborder is a very (client) cpu intensive operation!<br />filling is done pixel by pixel<br/>e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU..
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> maybe used together with command <a href="#userdraw">userdraw clickfill,color</a>
 </span></li>
 </ul>
-<li><a name='floodfill' href='#floodfill top'> floodfill x,y,color</a><ul>
+<li><a name='floodfill' href='#floodfill top'>  floodfill x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='fill' href='#fill top'>fill</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> fill the region of point (x:y) with color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> any other color or size of picture (borders of picture) will act as border to the bucket fill
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: floodfill is a very (client) cpu intensive operation!<br />filling is done pixel by pixel<br/>e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU..
 </span></li>
 </ul>
-<li><a name='fontcolor' href='#fontcolor top'> fontcolor color</a><ul>
+<li><a name='fontcolor' href='#fontcolor top'>  fontcolor color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> color: hexcolor or colorname
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default: black
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example usage: x/y-axis text
 </span></li>
 </ul>
-<li><a name='fontfamily' href='#fontfamily top'> fontfamily font_description</a><ul>
+<li><a name='fontfamily' href='#fontfamily top'>  fontfamily font_description</a><ul>
 <li><span style="color:blue;font-size:0.8em"> set the font family; for browsers that support it
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> font_description: Ariel ,Courier, Helvetica etc
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case commands<br /> 'string color,x,y,the string'<br /> 'stringup color,x,y,rotation,the string'<br />fontfamily can be something like:<br />italic 34px Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use correct syntax : 'font style' 'font size'px 'fontfamily'
 </span></li>
 </ul>
-<li><a name='fontsize' href='#fontsize top'> fontsize font_size</a><ul>
+<li><a name='fontsize' href='#fontsize top'>  fontsize font_size</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default value 12
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note:for some macro's (like grid | legend | xaxistext | xlabel etc) sometimes command <a href="#fontfamily">"fontfamily"</a> can be used for some specific font-setting<br />this is however not always very straight forward...so just try and see what happens
 </span></li>
 </ul>
-<li><a name='functionlabel' href='#functionlabel top'> functionlabel 'some string'</a><ul>
+<li><a name='functionlabel' href='#functionlabel top'>  functionlabel 'some string'</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default value "f(x)="
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> no mathml allowed (just ascii string)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize int' to adjust the size
 <li><span style="color:blue;font-size:0.8em"> use command 'strokecolor colorname' to adjust the labels (individually, if needed)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if needed, use before every command 'userinput function | inputfield | textarea'
 </span></li>
 </ul>
-<li><a name='grid' href='#grid top'> grid step_x,step_y,gridcolor</a><ul>
+<li><a name='grid' href='#grid top'>  grid step_x,step_y,gridcolor</a><ul>
 <li><span style="color:blue;font-size:0.8em"> if keywords <a href="#axis">"axis"</a> or <a href="#axisnumbering">"axisnumbering"</a> are set, use :<br />grid step_x,step_y,major_color,minor_x,minor_y,tics height in px,axis_color<br />minor x step = step_x / minor_x
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in that case, use command <a href="#fontcolor">"fontcolor"</a>, <a href="#fontsize">"fontsize"</a> and / or <a href="#fontfamily">"fontfamily"</a> to adjust font <br />defaults: black,12,Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if xmin > 0 and/or ymin > 0 and zooming / panning is not activ: <br /> be aware that the x/y-axis numbering and x/y major/minor tic marks will not be visual <br /> as they are placed under the x-axis and left to the y-axis (in Quadrant II and IV)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set <a href="#onclick">"onclick"</a> or <a href="#drag">"drag xy"</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use commands <a href="#xlabel">'xlabel some_string'</a> and/or <a href="#ylabel">'ylabel some_string'</a> to label axis;<br />use command "fontsize" to adjust size:the font family is non-configurable 'italic your_fontsize px Ariel' !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> see commands (see <a href="#xaxis">"xaxis" or xaxistext"</a>, <a href="#yaxis">"yaxis" or "yaxistext"</a> to set tailormade values on axis (the used font is set by <a href="fontfamily">command fontfamily</a>; default '12px Ariel')
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> see command <a href="#legend">"legend"</a>to set a legend for the graph ;<br />use command <a href="#fontsize">"fontsize"</a> to adjust size (the font family is non-configurable 'bold your_fontsize px Ariel')
 </span></li>
 </ul>
-<li><a name='gridfill' href='#gridfill top'> gridfill x0,y0,dx,dy,color</a><ul>
+<li><a name='gridfill' href='#gridfill top'>  gridfill x0,y0,dx,dy,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x0,y0 in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> distances dx,dy in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is also a command <a href="userdraw">userdraw hatchfill,color</a>
 </span></li>
 </ul>
-<li><a name='demiline' href='#demiline top'> demiline x1,y1,x2,y2,color</a><ul>
+<li><a name='demiline' href='#demiline top'>  demiline x1,y1,x2,y2,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='halfline' href='#halfline top'>halfline</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draws a halfline starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='demilines' href='#demilines top'> demilines color,x1,y1,x2,y2,....</a><ul>
+<li><a name='demilines' href='#demilines top'>  demilines color,x1,y1,x2,y2,....</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='halflines' href='#halflines top'>halflines</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draws halflines starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex) etc etc
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> indiviually
 </span></li>
 </ul>
-<li><a name='hatchfill' href='#hatchfill top'> hatchfill x0,y0,dx,dy,color</a><ul>
+<li><a name='hatchfill' href='#hatchfill top'>  hatchfill x0,y0,dx,dy,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x0,y0 in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> distances dx,dy in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is also a command <a href="userdraw">userdraw hatchfill,color</a>
 </span></li>
 </ul>
-<li><a name='hline' href='#hline top'> hline x,y,color</a><ul>
+<li><a name='hline' href='#hline top'>  hline x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='horizontalline' href='#horizontalline top'>horizontalline</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw a horizontal line through point (x:y) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> or use command <a href='#curve'>'curve color,formula'</a> to draw the line <br />(uses more points to draw the line; is however better draggable)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='hlines' href='#hlines top'> hlines color,x1,y1,x2,y2,...</a><ul>
+<li><a name='hlines' href='#hlines top'>  hlines color,x1,y1,x2,y2,...</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='horizontallines' href='#horizontallines top'>horizontallines</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw horizontal lines through points (x1:y1)...(xn:yn) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='http' href='#http top'> http x1,y1,x2,y2,http://some_adress.com</a><ul>
+<li><a name='http' href='#http top'>  http x1,y1,x2,y2,http://some_adress.com</a><ul>
 <li><span style="color:blue;font-size:0.8em"> an active html-page will be displayed in an "iframe" rectangle left top (x1:y1) , right bottom (x2:y2)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> do not use interactivity (or mouse) if the mouse needs to be active in the iframe
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be 'set onclick' or 'drag xy'
 </span></li>
 </ul>
-<li><a name='html' href='#html top'> html x1,y1,x2,y2,html_string</a><ul>
+<li><a name='html' href='#html top'>  html x1,y1,x2,y2,html_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> all tags are allowed<br /> html-code using inputfields could be read using your own javascript-code. Do not use id's like 'canvas_input0' etc.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can be set onclick <br />(however dragging not supported)
 </span></li>
 </ul>
-<li><a name='imagefill' href='#imagefill top'> imagefill dx,dy,scaling to xsize &times; ysize?,image_url</a><ul>
+<li><a name='imagefill' href='#imagefill top'>  imagefill dx,dy,scaling to xsize &times; ysize?,image_url</a><ul>
 <li><span style="color:blue;font-size:0.8em"> The next suitable <b>filled object</b> will be filled with "image_url" tiled
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> scaling to xsize &times; ysize ? ... 1 = yes 0 = no
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> After pattern filling ,the fill-color should be reset !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> wims getins / image from class directory : imagefill 80,80,my_image.gif
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> normal url : imagefill 80,80,0,$module_dir/gifs/my_image.gif
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> normal url : imagefill 80,80,1,http://adres/a/b/c/my_image.jpg
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if dx,dy is larger than the image, the whole image will be background to the next object.
 </span></li>
 </ul>
-<li><a name='inputstyle' href='#inputstyle top'> inputstyle style_description</a><ul>
+<li><a name='inputstyle' href='#inputstyle top'>  inputstyle style_description</a><ul>
 <li><span style="color:blue;font-size:0.8em"> may be used before any 'style-able' html object.(like inputfields or buttons)<br />or any html objects that are generated by some canvasdraw commands
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example: inputstyle color:blue;font-weight:bold;font-style:italic;font-size:16pt
 </span></li>
 </ul>
-<li><a name='input' href='#input top'> input x,y,size,editable,value</a><ul>
+<li><a name='input' href='#input top'>  input x,y,size,editable,value</a><ul>
 <li><span style="color:blue;font-size:0.8em"> to set inputfield "readonly", use editable = 0
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only active inputfields (editable = 1) will be read with read_canvas();
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if "$status=done" (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br />override this by keyword <a href="#status">'status'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be further controlled by <a href="#inputstyle">"inputstyle"</a> (inputcss is not yet implemented...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use keyword <a href='#xoffset'>xoffset | centered</a> if the inputfield should be centered on (x:y)<br /> default is the left top corner is (x:y)
 </span></li>
 </ul>
-<li><a name='intooltip' href='#intooltip top'> intooltip link_text</a><ul>
+<li><a name='intooltip' href='#intooltip top'>  intooltip link_text</a><ul>
 <li><span style="color:blue;font-size:0.8em"> link_text is a single line (span-element)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> link_text may also be an image URL 'http://some_server/images/my_image.png' or '$module_dir/gifs/my_image.jpg'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> link_text may contain HTML markup
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the canvas will be displayed in a tooltip on 'link_text'
 <li><span style="color:blue;font-size:0.8em"> the canvas is default transparent: use command <a href="#bgcolor">'bgcolor color'</a> to adjust background-color<br />the link text will also be shown with this 'bgcolor'.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> many 'userinput stuff' will use the tooltip_placeholder_div element...only one is defined in the wims-page<br />and are therefor these commands are mutually exclusive.<br />keep this in mind...
 </span></li>
 </ul>
-<li><a name='jscurve' href='#jscurve top'> jscurve color,formula(x)</a><ul>
+<li><a name='jscurve' href='#jscurve top'>  jscurve color,formula1(x),formula2(x),formula3(x),...</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='jsplot' href='#jsplot top'>jsplot</a></span></li>
-<li><span style="color:blue;font-size:0.8em"> your function will be plotted by the javascript engine of the client browser.
+<li><span style="color:blue;font-size:0.8em"> your function will be plotted by the javascript engine of the client browser
+</span></li>
+<li><span style="color:blue;font-size:0.8em"> if <a href='trange'>trange</a> is defined, the two functions will be plotted parametric<br /><b>note</b>: use <i>x</i> as variable...and not <i>t</i>. Use keyword <a href='#animate'>animate</a> to animate a point on the curve
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use only basic math in your curve:<br /> sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use parenthesis and rawmath : use 2*x instead of 2x ; use 2^(sin(x))...etc etc<br />use error console to debug any errors...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b> : last "precision" command in the canvasdraw script determines the calculation precision of the javascript curve plot !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> no validity check is done by wims.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> zooming & panning are implemented :<br />use command 'zoom color' for mouse driven zooming<br />or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> zooming & panning is better than for curves produced by command <a href="#curve">curve color,formula</a> because for avery change in x/y-range the curve is recalculated in javascript
+</span></li>
+<li><span style="color:blue;font-size:0.8em"> use keyword <a href='animate'>animate</a> for animating a point on the curve
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'trace_jscurve formula(x)` for tracing
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'jsmath formula(x)` for calculating and displaying indiviual points on the curve
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> plotting multiple js-curves on the same canvas <br/>(for example if you want to use 'userdraw clickfill,color' on <a href="#canvastype">canvastype</a> number 111 ,use :<br/> jscurve red,fun1(x),fun2(x)...fun_n(x)<br /> you want to specify individual colors | opacity | linewidth for these multiple js-curves.<br />use commands like: <a href="#multistrokecolors">multistrokecolors</a>,<a href="#multilinewidth">multilinewidth</a>, <a href="#multidash">multidash</a><br />, <a href="multistrokeopacity">multistroke</a><br />the <b>color</b> given for the command "jscurve <b>color</b>,formulas(x)" will not be used in that case...<br />but the color argument must still be given in any case (otherwise syntax error...)
 </span></li>
 </ul>
-<li><a name='jsmath' href='#jsmath top'> jsmath some_math_function</a><ul>
+<li><a name='jsmath' href='#jsmath top'>  jsmath some_math_function</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default labels 'x' and 'y'<br />the commands 'xlabel some_x_axis_name' and 'ylabel some_y_axis_name' will set the label for the input fields
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'inputstyle some_css' for styling the display fields. Use command 'fontsize int' to size the labels 'x' and 'y'
 <li><span style="color:blue;font-size:0.8em"> the client browser will convert your math function to javascript math.<br />use parenthesis and rawmath : use 2*x instead of 2x etc etc<br />no check is done on the validity of your function and/or syntax<br />use error console to debug any errors...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> be aware that the formula's of the plotted function(s) can be found in the page javascript source
 </span></li>
 </ul>
-<li><a name='killaffine' href='#killaffine top'> killaffine</a><ul>
+<li><a name='killaffine' href='#killaffine top'>  killaffine</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword : resets the transformation matrix to 1,0,0,1,0,0
 </span></li>
 </ul>
-<li><a name='killrotate' href='#killrotate top'> killrotate will reset the command <a href="#rotationcenter">rotationcenter xc,yc</a></a><ul>
+<li><a name='killrotate' href='#killrotate top'>  killrotate will reset the command <a href="#rotationcenter">rotationcenter xc,yc</a></a><ul>
 <li><span style="color:blue;font-size:0.8em"> a following rotate command will have the first object point as rotation center
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set, the rotation center will remain unchanged
 </span></li>
 </ul>
-<li><a name='killslider' href='#killslider top'> killslider</a><ul>
+<li><a name='killslider' href='#killslider top'>  killslider</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> ends grouping of object under a previously defined slider
 </span></li>
 </ul>
-<li><a name='killtranslation' href='#killtranslation top'> killtranslation</a><ul>
+<li><a name='killtranslation' href='#killtranslation top'>  killtranslation</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='killtranslate' href='#killtranslate top'>killtranslate</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> resets the translation matrix to 1,0,0,1,0,0
 </span></li>
 </ul>
-<li><a name='line' href='#line top'> line x1,y1,x2,y2,color</a><ul>
+<li><a name='line' href='#line top'>  line x1,y1,x2,y2,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a line through points (x1:y1)--(x2:y2) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> or use command 'curve color,formula' to draw the line <br />(uses more points to draw the line; is however better draggable)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='lines' href='#lines top'> lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n</a><ul>
+<li><a name='lines' href='#lines top'>  lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> or use multiple commands 'curve color,formula' or "jscurve color,formule" to draw the line <br />(uses more points to draw the line; is however better draggable)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: the flydraw command "lines" is equivalent to canvasdraw command <a href="#polyline">"polyline"</a>
 </span></li>
 </ul>
-<li><a name='linewidth' href='#linewidth top'> linewidth int</a><ul>
+<li><a name='linewidth' href='#linewidth top'>  linewidth int</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default 1
 </span></li>
 </ul>
-<li><a name='lattice' href='#lattice top'> lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color</a><ul>
+<li><a name='lattice' href='#lattice top'>  lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy"
 </span></li>
 </ul>
-<li><a name='levelcurve' href='#levelcurve top'> levelcurve color,expression in x/y,l1,l2,...</a><ul>
+<li><a name='levelcurve' href='#levelcurve top'>  levelcurve color,expression in x/y,l1,l2,...</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br />(choose flydraw if you want quality...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> every individual level curve may be set 'onclick / drag xy' <br />e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier
 <li><span style="color:blue;font-size:0.8em"> note : the arrays for holding the javascript data are limited in size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note : reduce image size if javascript data arrays get overloaded<br />(command 'plotsteps int' will not control the data size of the plot...)
 </span></li>
 </ul>
-<li><a name='legend' href='#legend top'> legend string1:string2:string3....string_n</a><ul>
+<li><a name='legend' href='#legend top'>  legend string1:string2:string3....string_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will be used to create a legend for a graph
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> also see command <a href='#piechart'>'piechart'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will use the same colors per default as used in the graphs : use command <a href='#legendcolors'>'legendcolors'</a> to override the default
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#fontsize">fontsize</a> to adjust. (command "fontfamily" is not active for command "legend")
 </span></li>
 </ul>
-<li><a name='legendcolors' href='#legendcolors top'> legendcolors color1:color2:color3:...:color_n</a><ul>
+<li><a name='legendcolors' href='#legendcolors top'>  legendcolors color1:color2:color3:...:color_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will be used to colour a legend: use this command after the legend command ! e.g.<br />legend test1:test2:test3<br />legendcolors blue:red:orange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> make sure the number of colours match the number of legend items
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> command 'legend' in case of 'piechart' and 'barchart' will use these colours per default (no need to specify 'legendcolors'
 </span></li>
 </ul>
-<li><a name='linegraph' href='#linegraph top'> linegraph x1:y1:x2:y2...x_n:y_n</a><ul>
+<li><a name='linegraph' href='#linegraph top'>  linegraph x1:y1:x2:y2...x_n:y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will plot your data in a graph
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may <b>only</b> to be used together with command <a href='#grid'>'grid'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can be used together with freestyle x-axis/y-axis texts : see commands <a href='#xaxis'>'xaxis'</a>,<a href='#xaxisup'>'xaxisup'</a> and <a href='#yaxis'>'yaxis'</a>
 <li><span style="color:blue;font-size:0.8em"> note: your arguments are not checked by canvasdraw : use your javascript console in case of trouble...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <ul><li>use command <a href='#strokecolor'>'strokecolor'</a> before a command 'linegraph' to set the color of this graph</li><li>use command <a href='#linewidth'>'linewidth'</a> before command 'linegraph' to set linewidth of this graph</li><li>use keyword <a href='#dashed'>'dashed'</a> before command 'linegraph' to set dashing of the graph</li><li>if dashing is set, use command <a href='#dashtype'>'dashtype'</a> before command 'linegraph' to set the type of dashing of the (individual) graph</li></ul>
 </span></li>
 </ul>
-<li><a name='mathml' href='#mathml top'> mathml x1,y1,x2,y2,mathml_string</a><ul>
+<li><a name='mathml' href='#mathml top'>  mathml x1,y1,x2,y2,mathml_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> mathml will be displayed in a rectangle left top (x1:y1)...<br />x2 and y2 are still needed, but not used as the right bottom corner of the embedded div element.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of drag(xy|x|y) | onclick the div rectangle left to corner will be the drag-anchor of the mathml object
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can be set onclick <br />javascript:read_dragdrop(); will return click numbers of mathml-objects<br />if 4 click_able object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
 <li><span style="color:blue;font-size:0.8em"> if inputfields are incorporated in mathml (with id's : id='mathml0',id='mathml1',...id='mathml_n')<br />the user_input values will be read by javascript:read_mathml();<br /><b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> If other inputfields (command input / command textarea) or userdraw is performed, the function read_canvas() will not read mathml. Use some generic function to read it....
 </span></li>
 </ul>
-<li><a name='mouse' href='#mouse top'> mouse color,fontsize</a><ul>
+<li><a name='mouse' href='#mouse top'>  mouse color,fontsize</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will display the cursor (x:y) coordinates in 'color' and 'font size'<br /> using default fontfamily Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
 </span></li>
 </ul>
-<li><a name='mouse_degree' href='#mouse_degree top'> mouse_degree color,fontsize</a><ul>
+<li><a name='mouse_degree' href='#mouse_degree top'>  mouse_degree color,fontsize</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will display the angle in degrees between x-axis, (0:0) and the cursor (x:y) in 'color' and 'font size'<br /> using a fontfamily Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> The angle is positive in QI and QIII and the angle value is negative in QII and QIV
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
 </span></li>
 </ul>
-<li><a name='display' href='#display top'> display TYPE,color,fontsize</a><ul>
+<li><a name='display' href='#display top'>  display TYPE,color,fontsize</a><ul>
 <li><span style="color:blue;font-size:0.8em"> TYPE may be x | y | xy | degree | radian | radius
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will display the mouse cursor coordinates as x-only,y-only,(x:y),<br />the radius of a circle (this only in case 'userdraw circle(s),color')<br />or the angle in degrees or radians for commands "userdraw arc,color" or protractor , ruler (if set dynamic)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use commands 'xunit' and / or 'yunit' to add the units to the mouse values.<br />The "degree | radian" will always have the appropriate symbol)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> just like commands 'mouse','mousex','mousey','mouse_degree'...only other name)
 </span></li>
 </ul>
-<li><a name='precision' href='#precision top'> precision int</a><ul>
+<li><a name='precision' href='#precision top'>  precision int</a><ul>
 <li><span style="color:blue;font-size:0.8em"> 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be used / changed before every object
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> In case of user interaction (like 'userdraw' or 'multidraw') this value will be used to determine the amount of decimals in the reply / answer
 </span></li>
 </ul>
-<li><a name='mousex' href='#mousex top'> mousex color,fontsize</a><ul>
+<li><a name='mousex' href='#mousex top'>  mousex color,fontsize</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will display the cursor x-coordinate in 'color' and 'font size'<br /> using the fontfamily Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
 </span></li>
 </ul>
-<li><a name='mousey' href='#mousey top'> mousey color,fontsize</a><ul>
+<li><a name='mousey' href='#mousey top'>  mousey color,fontsize</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will display the cursor y-coordinate in 'color' and 'font size'<br /> using default fontfamily Ariel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
 </span></li>
 </ul>
-<li><a name='multidash' href='#multidash top'> multidash 0,1,1</a><ul>
+<li><a name='multidash' href='#multidash top'>  multidash 0,1,1</a><ul>
 <li><span style="color:blue;font-size:0.8em"> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <em>'multifill points,circle,segments'</em>, are dashed
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all objects will be set 'not dashed'...<br />unless a generic keyword <em>'dashed'</em> was given before command <em>'multidraw'</em>
 <li><span style="color:blue;font-size:0.8em"> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multidraw' href='#multidraw top'> multidraw obj_type_1,obj_type_2...obj_type_11</a><ul>
+<li><a name='multidraw' href='#multidraw top'>  multidraw obj_type_1,obj_type_2...obj_type_11</a><ul>
 <li><span style="color:blue;font-size:0.8em"> for simple single object user drawings you could also use command <a href="#userdraw">'userdraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> implemented obj_types:<ul><li>point | points </li><li>circle | circles </li><li>line | lines </li><li>segment | segments </li><li>arrow | arrows <br />use command 'arrowhead int' for size (default value 8 pixels)</li><li>rect | rects </li><li>closedpoly<br /><b>only one</b> closedpolygon may be drawn.The number of 'corner points' is not preset (e.g. not limited,freestyle)<br />the polygone is closed when clicking on the first point again..(+/- 10px) </li><li>triangle | triangles</li><li>parallelogram | parallelograms</li><li>poly[3-9] | polys[3-9] draw 3...9 point polygone(s): polys3 is of course triangles </li></ul>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> additionally objects may be user labelled, using obj_type 'text'...<br />in this case allways a text input field and if <a href='#multiuserinput'> multiuserinput=1 </a> also (x:y) inputfields will be added to the page.<br />use commands 'fontfamily' and 'fontcolor' to adjust. (command 'multistrokeopacity' may be set to adjust text opacity)<br />note: text is always centered on the mouse-click or user-input coordinates !<br />note: no keyboard listeners are used
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: for command argument 'closedpoly' only one polygone can be drawn.<br />The last point (e.g. the point clicked near the first point) of the array is removed.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <em>technical: all 10 'draw primitives' + 'text' will have their own -transparent- PNG bitmap canvas. <br />So for example there can be a points_canvas entirely separated from a line_canvas.<br />This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn)<br />This in contrast to many very slow do-it-all HTML5 canvas javascript libraries.<br />The mouselisteners are attached to the canvas-div element.</em>
 </span></li>
 </ul>
-<li><a name='multilabel' href='#multilabel top'> multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'</a><ul>
+<li><a name='multilabel' href='#multilabel top'>  multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all labels (e.g. the value='' of input type 'button') will be set by the english names for the draw_primitives (like 'point','circle'...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the 'stop drawing' button text <b>must</b> be the last item on the 'multilabel' -list <br />for example:<br /><em>multilabel punten,lijnen,Stop met Tekenen<br />multidraw points,lines</em>
 <li><span style="color:blue;font-size:0.8em"> wims will not check the amount or validity of your input
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multilinewidth' href='#multilinewidth top'> multilinewidth linewidth_1,linewidth_2,...,linewidth_8</a><ul>
+<li><a name='multilinewidth' href='#multilinewidth top'>  multilinewidth linewidth_1,linewidth_2,...,linewidth_8</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all line width will be set by a previous command <em>'linewidth int'</em>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use these up to 7 different line widths for the draw primitives used by command <em>'multidraw obj_type_1,obj_type_2...obj_type_7</em>
 <li><span style="color:blue;font-size:0.8em"> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multifill' href='#multifill top'> multifill 0,0,1,0,1,0,0</a><ul>
+<li><a name='multifill' href='#multifill top'>  multifill 0,0,1,0,1,0,0</a><ul>
 <li><span style="color:blue;font-size:0.8em"> meaning draw objects no. 3 and 5, in the list of command 'multifill', are filled<br />(if the object is fillable...and not a line,segment,arrow or point...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all objects -except point|points- will be set 'not filled'...<br />unless a command 'filled' was given before command 'multifill'
 <li><span style="color:blue;font-size:0.8em"> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multifillcolors' href='#multifillcolors top'> multifillcolors color_name_1,color_name_2,...,color_name_8</a><ul>
+<li><a name='multifillcolors' href='#multifillcolors top'>  multifillcolors color_name_1,color_name_2,...,color_name_8</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be 'stroke_color' , 'fill_opacity'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use these up to 6 colors for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_n
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can also be used with command <a href='#userdraw'>'userdraw clickfill,color'</a> when more than one fillcolor is wanted.<br />in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br />the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors<br />if more control over the used colours is wanted , see command <a href='#colorpalette'>colorpalette color1,color2...</a>
 </span></li>
 </ul>
-<li><a name='multifillopacity' href='#multifillopacity top'> multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8</a><ul>
+<li><a name='multifillopacity' href='#multifillopacity top'>  multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8</a><ul>
 <li><span style="color:blue;font-size:0.8em"> float values 0 - 1 or integer values 0 - 255
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all fill opacity_ will be set by previous command <em>'opacity int,int'</em> and keyword <em>'filled'</em>
 <li><span style="color:blue;font-size:0.8em"> wims will not check the amount or validity of your input
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multisnaptogrid' href='#multisnaptogrid top'> multisnaptogrid 0,1,1</a><ul>
+<li><a name='multisnaptogrid' href='#multisnaptogrid top'>  multisnaptogrid 0,1,1</a><ul>
 <li><span style="color:blue;font-size:0.8em"> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <em>'multifill points,circle,segments'</em>, will snap to the xy-grid (default 1 in x/y-coordinate system: see command <a href='#snaptogrid'>'snaptogrid'</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only the x-values snap_to_grid: <em>multisnaptogrid 0,2,2</em>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only the y-values snap_to_grid: <em>multisnaptogrid 0,3,3</em>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
 </span></li>
 </ul>
-<li><a name='multistrokecolors' href='#multistrokecolors top'> multistrokecolors color_name_1,color_name_2,...,color_name_8</a><ul>
+<li><a name='multistrokecolors' href='#multistrokecolors top'>  multistrokecolors color_name_1,color_name_2,...,color_name_8</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all colors will be 'stroke_color' , 'stroke_opacity'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use these up to 6 colors for the draw primitives used by command <em>'multidraw obj_type_1,obj_type_2...obj_type_7</em>
 <li><span style="color:blue;font-size:0.8em"> wims will <b>not</b> check if the number of colours matches the amount of draw primitives...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multistrokeopacity' href='#multistrokeopacity top'> multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7</a><ul>
+<li><a name='multistrokeopacity' href='#multistrokeopacity top'>  multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7</a><ul>
 <li><span style="color:blue;font-size:0.8em"> float values 0 - 1 or integer values 0 - 255
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not set all stroke opacity_ will be set by previous command <em>'opacity int,int'</em>
 <li><span style="color:blue;font-size:0.8em"> wims will not check the amount or validity of your input
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='multiuserinput' href='#multiuserinput top'> multiuserinput 0,1,1,0</a><ul>
+<li><a name='multiuserinput' href='#multiuserinput top'>  multiuserinput 0,1,1,0</a><ul>
 <li><span style="color:blue;font-size:0.8em"> meaning, when the command 'multidraw' is used <br />multidraw circles,points,lines,triangles<br />objects 'points' and 'lines' may additionally be 'drawn' by direct input (inputfields)<br/>all other objects must be drawn with a mouse
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of circle | circles a third inputfield for Radius (R) is added.<br />the radius must be in the x/y coordinate system (x-range) and <b>not</b> in pixels...students don't think in pixels.<br />note: R-values will not snap-to-grid
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of line(s) | segment(s) | arrow(s) the user should write <b>x1:y1</b> in the first inputfield and <b/>x2:y2</b> in the second.<br />These 'hints' are pre-filled into the input field.<br />other coordinate delimiters are ";" and "," e.g. <b>x1;y1</b> or <b>x1,y1</b>.<br />An error message (alert box) will popup when things are not correctly...
 <li><span style="color:blue;font-size:0.8em"> use before command <a href='#multidraw'>'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> always use the same sequence as is used for 'multidraw'
 </span></li>
 </ul>
-<li><a name='noaxis' href='#noaxis top'> noaxis</a><ul>
+<li><a name='noaxis' href='#noaxis top'>  noaxis</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set, the automatic x-axis numbering will be ignored
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="grid">grid</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 </ul>
-<li><a name='noayis' href='#noayis top'> noayis</a><ul>
+<li><a name='noayis' href='#noayis top'>  noayis</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set, the automatic y-axis numbering will be ignored
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="grid">grid</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 </ul>
-<li><a name='numberline' href='#numberline top'> numberline x0,x1,xmajor,xminor,y0,y1</a><ul>
+<li><a name='numberline' href='#numberline top'>  numberline x0,x1,xmajor,xminor,y0,y1</a><ul>
 <li><span style="color:blue;font-size:0.8em"> numberline is using xrange/yrange system for all dimensions
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> multiple numberlines are allowed ; combinations with command <a href='#grid'>grid</a> is allowed; multiples commands <a href='#xaxis'>xaxis numbering</a> are allowed
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> x0 is start x-value in xrange
 <li><span style="color:blue;font-size:0.8em"> <a href="#snaptogrid">snaptogrid, snaptopoints etc</a> and <a href="#zoom">zooming and panning</a> is supported
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> onclick and dragging of the numberline are not -yet- supported
 </span></li>
 </ul>
-<li><a name='opacity' href='#opacity top'> opacity 0-255,0-255</a><ul>
+<li><a name='opacity' href='#opacity top'>  opacity 0-255,0-255</a><ul>
 <li><span style="color:blue;font-size:0.8em"> opacity 0.0 - 1.0,0.0 - 1.0
 </span></li>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='transparent' href='#transparent top'>transparent</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> first item is stroke opacity, second is fill opacity
 </span></li>
 </ul>
-<li><a name='onclick' href='#onclick top'> onclick</a><ul>
+<li><a name='onclick' href='#onclick top'>  onclick</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if the next object is clicked, its 'object onclick_or_drag sequence number' in fly script is returned <br /> by javascript:read_canvas();
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> onclick seqeuence numbering starts at '0'.<br />e.g. if there are 6 objects set onclick, the first onclick object will have id-number '0', the last id-number '5'
 <li><span style="color:blue;font-size:0.8em"> onclick and <a href="#drag">drag x|y|xy</a> may be combined in a single flyscript <br />(although a single object can <b>not</b> be onclick and draggable at the same time...)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: not all objects may be set onclick
 </span></li>
 </ul>
-<li><a name='parallel' href='#parallel top'> parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]</a><ul>
+<li><a name='parallel' href='#parallel top'>  parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]</a><ul>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy"
 </span></li>
 </ul>
-<li><a name='plotsteps' href='#plotsteps top'> plotsteps a_number</a><ul>
+<li><a name='plotsteps' href='#plotsteps top'>  plotsteps a_number</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default 150
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only used for commands <a href="#curve">"curve / plot"</a> and <a href="#levelcurve">"levelcurve"</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use with care !
 </span></li>
 </ul>
-<li><a name='point' href='#point top'> point x,y,color</a><ul>
+<li><a name='point' href='#point top'>  point x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a single point at (x;y) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adust size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 <li><span style="color:blue;font-size:0.8em"> will not resize on zooming <br />(command 'circle x,y,r,color' will resize on zooming)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> attention: in case of command <a href="#rotate">'rotate angle'</a> a point has rotation center (0:0) in x/y-range
 </span></li>
 </ul>
-<li><a name='points' href='#points top'> points color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
+<li><a name='points' href='#points top'>  points color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw multiple points at given coordinates in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adust size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> attention: in case of command <a href="#rotate">'rotate angle'</a> the points have rotation center (0:0) in x/y-range
 </span></li>
 </ul>
-<li><a name='poly' href='#poly top'> poly color,x1,y1,x2,y2...x_n,y_n</a><ul>
+<li><a name='poly' href='#poly top'>  poly color,x1,y1,x2,y2...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> polygon color,x1,y1,x2,y2...x_n,y_n
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> draw closed polygon
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fpoly' to fill it or use keyword <a href='#filled'>'filled'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='polyline' href='#polyline top'> polyline color,x1,y1,x2,y2...x_n,y_n</a><ul>
+<li><a name='polyline' href='#polyline top'>  polyline color,x1,y1,x2,y2...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> brokenline color,x1,y1,x2,y2...x_n,y_n
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> path color,x1,y1,x2,y2...x_n,y_n
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> remark: there is <b>no</b> command polylines | brokenlines | paths ... just use multiple commands "polyline ,x1,y1,x2,y2...x_n,y_n"
 <li><span style="color:blue;font-size:0.8em"> use command <a href='#segments'>'segments'</a> for a series of segments.<br />these may be clicked/dragged individually
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='popup' href='#popup top'> popup</a><ul>
+<li><a name='popup' href='#popup top'>  popup</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if fly-script starts with keyword 'popup', the canvas image will be exclusively in a popup window (xsize px &times; ysize px)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if keyword 'popup' is used after command 'size xsize,ysize' the canvas will also be displayed in a popup window with size 'xsize &times; ysize'
 <li><span style="color:blue;font-size:0.8em"> the popup window will be embedded into the page as a 'normal' image , when 'status=done' ; override with keyword <a href="#status"> 'nostatus'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to access the read_canvas and read_dragdrop functions in a popup window, use:<br /><em><br /> function read_all(){<br /> if( typeof popup !== 'undefined' ){<br /> var fun1 = popup['read_dragdrop'+canvas_scripts[0]];<br /> var fun2 = popup['read_canvas'+canvas_scripts[0]];<br /> popup.close();<br /> return "dragdrop="+fun1()+"\ncanvas="+fun2();<br /> };<br /></em>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like:<br /><em>popup.set_clock(clock_id,type,diff);</em><br />as js-function for a button (or something else) in your document page.<br />wherein <b>clock_id</b> starts with 0 for the first clock<br /><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br /><b>diff</b> is the increment (positive or negative) per click
 </span></li>
 </ul>
-<li><a name='protractor' href='#protractor top'> protractor x,y,x_width,type,mode,use_a_scale</a><ul>
+<li><a name='protractor' href='#protractor top'>  protractor x,y,x_width,type,mode,use_a_scale</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x,y are the initial location
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> x_width : give the width in x-coordinate system (e.g. not in pixels !)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> type = 1 : a triangle range 0 - 180<br />type = 2 : a circle shape 0 - 360
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> mode : use -1 to set the protractor interactive (mouse movement of protractor)<br />use mode = '0&deg; - 360&deg;' to set the protractor with a static angle of some value
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if the value of the user_rotation angle is to be shown...use command <a href='#display'>display degree,color,fontsize</a><a href='#display'>display radian,color,fontsize</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use_scale = 1 : the protractor will have some scale values printed; use_scale=0 to disable
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> commands <em>stroke_color | fill_color | linewidth | opacity | font_family</em> will determine the looks of the protractor.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br />use command 'precision' to set the reply precision.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if combined with a ruler, use replyformat = 32
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> command <em>snap_to_grid</em> may be used to assist the pupil at placing the protractor
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> when using command 'zoom' , pay <b>attention</b> to the size and symmetry of your canvas<br />...to avoid a partial image, locate the start position near the center of the visual canvas<br /><em>technical:<br /> the actual 'protractor' is just a static generated image in a new canvas-memory<br />This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.<br />That is the reason for the 'high-speed dragging and rotating'.<br />I've limited its size to xsize &times; ysize e.g. the same size as the visual canvas... </em>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only one protractor allowed (for the time being)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> usage: first left click on the protractor will activate dragging;<br />a second left click will activate rotating (just move mouse around)<br />a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)<br />a next click will restart this sequence...
 </span></li>
 </ul>
-<li><a name='pixels' href='#pixels top'> pixels color,x1,y1,x2,y2,x3,y3...</a><ul>
+<li><a name='pixels' href='#pixels top'>  pixels color,x1,y1,x2,y2,x3,y3...</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw rectangular "points" with diameter 1 pixel
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> pixels can <b>not</b> be dragged or clicked
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> "pixelsize = 1" may be changed by command "pixelsize int"
 </span></li>
 </ul>
-<li><a name='pixelsize' href='#pixelsize top'> pixelsize int</a><ul>
+<li><a name='pixelsize' href='#pixelsize top'>  pixelsize int</a><ul>
 <li><span style="color:blue;font-size:0.8em"> in case you want to deviate from default pixelsize = 1(...)
 </span></li>
 </ul>
-<li><a name='piechart' href='#piechart top'> piechart xc,yc,radius,'data+colorlist'</a><ul>
+<li><a name='piechart' href='#piechart top'>  piechart xc,yc,radius,'data+colorlist'</a><ul>
 <li><span style="color:blue;font-size:0.8em"> (xc : yc) center of circle diagram in xrange/yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> radius in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> data+color list: a colon separated list of raw data and corresponding colours<br />canvasdraw will not check validity of colornames...<br />in case of trouble look into javascript debugging of your browser
 <li><span style="color:blue;font-size:0.8em"> if defined <a href='#fillpattern'>'fillpattern some_pattern'</a> then the pie pieces will be filled with the respective color and a fill pattern...<br />the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "<a href='#opacity'>'opacity'</a> to adjust fill_opacity of colours
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href='#legend'>'legend'</a> to automatically create a legend <br />using the same colours as pie segments<br />unicode allowed in legend<br />expect javascript trouble if the amount of 'pie-slices', 'pie-colours' 'pie-legend-titles' do not match<br />a javascript console is your best friend...<br />use command 'fontfamily' to set the font of the legend.
 </span></li>
 </ul>
-<li><a name='rays' href='#rays top'> rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n</a><ul>
+<li><a name='rays' href='#rays top'>  rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw rays in color 'color' and center (xc:yc)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set draggable or onclick (every individual ray)
 </span></li>
 </ul>
-<li><a name='rect' href='#rect top'> rect x1,y1,x2,y2,color</a><ul>
+<li><a name='rect' href='#rect top'>  rect x1,y1,x2,y2,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use command 'frect x1,y1,x2,y2,color' for a filled rectangle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command/keyword <a href='#filled'>'filled'</a> before command 'rect x1,y1,x2,y2,color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='rects' href='#rects top'> rects color,x1,y1,x2,y2,.....</a><ul>
+<li><a name='rects' href='#rects top'>  rects color,x1,y1,x2,y2,.....</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use command 'frect color,x1,y1,x2,y2,.....' for a filled rectangle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command/keyword <a href='#filled'>'filled'</a> before command 'rects color,x1,y1,x2,y2,....'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fillcolor color' before 'frects' to set the fill colour.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='replyformat' href='#replyformat top'> replyformat number</a><ul>
+<li><a name='replyformat' href='#replyformat top'>  replyformat number</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default values should be fine !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'precision [0,1,10,100,1000,10000...]' before command 'replyformat' to set the desired number of decimals in the student reply / drawing
 <li><span style="color:blue;font-size:0.8em"> the last value for 'precision int' will be used to calculate the reply coordinates, if needed (read_canvas();)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> choose<ul><li>1 = x1,x2,x3,x4....x_n<br />y1,y2,y3,y4....y_n<br /><br />x/y in pixels</li><li>2 = x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n<br /> x/y in xrange / yrange coordinate system<br /></li><li>3 = x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n<br /> r1,r2,r3,r4....r_n<br /> x/y in pixels <br /> r in pixels</li><li>4 = x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n<br /> r1,r2,r3,r4....r_n<br /> x/y in xrange / yrange coordinate system<br /> r in pixels</li><li>5 = Ax1,Ax2,Ax3,Ax4....Ax_n<br /> Ay1,Ay2,Ay3,Ay4....Ay_n<br /> Bx1,Bx2,Bx3,Bx4....Bx_n<br /> By1,By2,By3,By4....By_n<br /> Cx1,Cx2,Cx3,Cx4....Cx_n<br /> Cy1,Cy2,Cy3,Cy4....Cy_n<br /> ....<br /> Zx1,Zx2,Zx3,Zx4....Zx_n<br /> Zy1,Zy2,Zy3,Zy4....Zy_n<br /> x/y in pixels<br /></li><li>6 = Ax1,Ax2,Ax3,Ax4....Ax_n<br /> Ay1,Ay2,Ay3,Ay4....Ay_n<br /> Bx1,Bx2,Bx3,Bx4....Bx_n<br /> By1,By2,By3,By4....By_n<br /> Cx1,Cx2,Cx3,Cx4....Cx_n<br /> Cy1,Cy2,Cy3,Cy4....Cy_n<br /> ....<br /> Zx1,Zx2,Zx3,Zx4....Zx_n<br /> Zy1,Zy2,Zy3,Zy4....Zy_n<br /> x/y in xrange / yrange coordinate system<br /></li><li>7 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n<br /> x/y in pixels</li><li>8 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n<br /> x/y in xrange / yrange coordinate system</li><li>9 = x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n<br /> x/y in pixels</li><li>10 = x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n<br /> x/y in xrange / yrange coordinate system</li><li>11 = Ax1,Ay1,Ax2,Ay2<br /> Bx1,By1,Bx2,By2<br /> Cx1,Cy1,Cx2,Cy2<br /> Dx1,Dy1,Dx2,Dy2<br /> ......<br /> Zx1,Zy1,Zx2,Zy2<br /> x/y in xrange / yrange coordinate system</li><li>12 = Ax1,Ay1,Ax2,Ay2<br /> Bx1,By1,Bx2,By2<br />Cx1,Cy1,Cx2,Cy2<br /> Dx1,Dy1,Dx2,Dy2<br /> ......<br /> Zx1,Zy1,Zx2,Zy2<br /> x/y in pixels</li><li>13 = Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2<br /> x/y in xrange / yrange coordinate system</li><li>14 = Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2<br /> x/y in pixels</li><li>15 = reply from inputfields,textareas<br /> reply1,reply2,reply3,...,reply_n</li><li>16 = mathml input fields </li><li>17 = read "userdraw text,color" only (x1,y1,text1 \n x2,y2,text2...\n...x_n,y_n,text_n <br /> x/y-values are in xrang/yrange</li><li>18 = read_canvas() will read all interactive clocks in H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</li><li>19 = read_canvas() will return the object number of marked / clicked object (clock)<br />analogue to (shape library) onclick command </li><li>20 = read_canvas() will reply "object_number:x:y" of external images : object_number of the first draggable external image in the fly-script starts with 0 <br />e.g. expect something like 0:-5:4,1:6:2,2:-2:-5 <br /> the first image position is (-5:4) , the second image position is (6:2) and the third image position is (-2:-5) <li>21 = (x1:y1) (x2:y2) ... (x_n:y_n)<br />verbatim coordinate return</li><li>22 = returns an array .... reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n<br /> x/y in xrange / yrange coordinate system</li><li>23 : can only be used for drawtype 'polyline'<br />a typical click sequence in drawtype polyline is x1,y1,x2,y2,x2,y2,x3,y3,x3,y3.....,x(n-1),y(n-1),x(n-1),y(n-1),xn,yn --replyformat 23--> x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn multiple occurences will be filtered out.The reply will be in x-y-range (xreply \n yreply)</li><li>24 = read all inputfield values: even those set 'readonly'</li><li>25 = angle1,angle2...angle_n : will return the radius (one or many) of the user drawn circle segment in degrees </li><li>26 = rad1,rad2...rad_n : will return the radius (one or many) of the user drawn circle segment in radians </li><li>27 = return (only) userdraw inputfields x1,y1,text1 \n x2,y2,text2...\n...x_n,y_n,text_n</li><li>28 = x1,y1,r1,x2,y2,r2...x_n,y_n,r_n <br />x / y / r in xrange / yrange coordinate system: may be used to reinput into command 'circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n'<br /> will not return anything else (e.g. no inputfields , text etc)</li></ul>
 </span></li>
 </ul>
-<li><a name='roundrect' href='#roundrect top'> roundrect x1,y1,x2,y2,radius in px,color</a><ul>
+<li><a name='roundrect' href='#roundrect top'>  roundrect x1,y1,x2,y2,radius in px,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use command 'froundrect x1,y1,x2,y2,radius,color' for a filled rectangle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command/keyword <a href='#filled'>'filled'</a> before command 'roundrect x1,y1,x2,y2,radius,color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> fillcolor will be identical to 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='roundrects' href='#roundrects top'> roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....</a><ul>
+<li><a name='roundrects' href='#roundrects top'>  roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....</a><ul>
 <li><span style="color:blue;font-size:0.8em"> for filled roundrects use command/keyword <a href='#filled'>'filled'</a> before command
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='ruler' href='#ruler top'> ruler x,y,x-width ,y-height,mode</a><ul>
+<li><a name='ruler' href='#ruler top'>  ruler x,y,x-width ,y-height,mode</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x,y are the initial location
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> x-width , y-height are the ruler dimensions width &amp; height in xy-coordinate system
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the ruler scale is by definition the x-scale, set by command 'xrange'<br />for example: a ruler x-width of 6 will have a scale ranging from 0 to 6
 <li><span style="color:blue;font-size:0.8em"> when using command 'zoom' , pay <b>attention</b> to the size and symmetry of your canvas<br />...to avoid a partial image, locate the start position near the center of the visual canvas<br /><em>technical:<br /> the actual 'ruler' is just a static generated image in a new canvas-memory<br />This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.<br />That is the reason for the 'high-speed dragging and rotating'.<br />I've limited its size to xsize &times; ysize e.g. the same size as the visual canvas... </em>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> usage: first left click on the ruler will activate dragging;<br />a second left click will activate rotating (just move mouse around)<br />a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)<br />a next click will restart this sequence...
 </span></li>
 </ul>
-<li><a name='resetoffset' href='#resetoffset top'> resetoffset</a><ul>
+<li><a name='resetoffset' href='#resetoffset top'>  resetoffset</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
 </span></li>
 </ul>
-<li><a name='rotate' href='#rotate top'> rotate rotation_angle</a><ul>
+<li><a name='rotate' href='#rotate top'>  rotate rotation_angle</a><ul>
 <li><span style="color:blue;font-size:0.8em"> angle in degrees
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> (only) the next object will be rotated is given angle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> positive values rotate counter clockwise
 <li><span style="color:blue;font-size:0.8em"> attention: all objects will be rotated around their first point...<br /><em>rotate 45</em><br /> <em>triangle 1,1,5,1,3,4,red</em><br />will rotate 45 degrees around point (1:1)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if another rotation center is needed, use command <a href="#rotationcenter">'rotationcenter xc,yc'</a>.<br />to reset this rotationcenter, use keyword <a href="killrotate">'killrotate'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> attention: rotate will mess up the interactivity of the rotated object <br />e.g. if combined with command <a href="#drag">"drag xy"</a> or keyword <a href="onclick">"onclick"</a> : the mouse recognises the original -unrotated- coordinates of the object
 </span></li>
 </ul>
-<li><a name='rotationcenter' href='#rotationcenter top'> rotationcenter x_center,y_center</a><ul>
+<li><a name='rotationcenter' href='#rotationcenter top'>  rotationcenter x_center,y_center</a><ul>
 <li><span style="color:blue;font-size:0.8em"> define an rotation center in your x/y-coordinate system
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> wims will not check the validity of your input; use javascript console to debug any erors
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if not defined a rotation will be around the first point of an object
 <li><span style="color:blue;font-size:0.8em"> to be used before command <a href="#rotate">rotate</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> all other commands will use this rotation center, unless a <a href="#killrotation">killrotation</a> is given
 </span></li>
 </ul>
-<li><a name='size' href='#size top'> size width,height</a><ul>
+<li><a name='size' href='#size top'>  size width,height</a><ul>
 <li><span style="color:blue;font-size:0.8em"> set canvas size in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> mandatory first command (can only be preceded by keyword <a href="#popup">'popup'</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if xrange and/or yrange is not given the range will be set to pixels :<br />xrange 0,xsize yrange 0,ysize<br />note: lower left corner is Origin (0:0) !!! this in contrast to flydraw
 </span></li>
 </ul>
-<li><a name='segment' href='#segment top'> segment x1,y1,x2,y2,color</a><ul>
+<li><a name='segment' href='#segment top'>  segment x1,y1,x2,y2,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='seg' href='#seg top'>seg</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw a line segment between points (x1:y1)--(x2:y2) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='segments' href='#segments top'> segments color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
+<li><a name='segments' href='#segments top'>  segments color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='segs' href='#segs top'>segs</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adust size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 </ul>
-<li><a name='setlimits' href='#setlimits top'> setlimits</a><ul>
+<li><a name='setlimits' href='#setlimits top'>  setlimits</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword : if set, it will produce 4 inputfields for 'xmin,xmax,ymin,ymax' and an 'ok' button
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be used for inputfield based zooming / panning
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be styled using command <a href="#inputstyle">inputstyle</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use commands <a href="#xlabel">xlabel / ylabel</a> to change text from xmin to 'xlabel' etc
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note:the input value will not be checked on validity
 </span></li>
 </ul>
-<li><a name='setpixel' href='#setpixel top'> setpixel x,y,color</a><ul>
+<li><a name='setpixel' href='#setpixel top'>  setpixel x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> pixels can <b>not</b> be dragged or clicked
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> "pixelsize = 1" may be changed by command "pixelsize int"
 </span></li>
 </ul>
-<li><a name='slider' href='#slider top'> slider start_value,end_value,width px,height px,<em>type</em>,label</a><ul>
+<li><a name='slider' href='#slider top'>  slider start_value,end_value,width px,height px,<em>type</em>,label</a><ul>
 <li><span style="color:blue;font-size:0.8em"> <em>type</em> may be : xy,x,y,angle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if a slider value display is desired, use for argument <em>type</em>:<br />xy display<br />x display<br />y display<br />angle radian<br />angle degree
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if a unit (or something like that...) for x/y-value display is needed, use commands 'xunit' and / or 'yunit'
 <li><span style="color:blue;font-size:0.8em"> use opacity (only fill opacity will be used) to set transparency
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the slider canvas will be added to the 'tooltip div' : so incompatible with command tooltip ; setlimits etc
 </span></li>
 </ul>
-<li><a name='sliderfunction_x' href='#sliderfunction_x top'> sliderfunction_x some_function_in_x</a><ul>
+<li><a name='sliderfunction_x' href='#sliderfunction_x top'>  sliderfunction_x some_function_in_x</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default value "x"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the x-value of the slider object(s) will be calculated with this function.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default is the x-slider value itself
 <li><span style="color:blue;font-size:0.8em"> only used by command 'slider'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> define before a slider command !
 </span></li>
 </ul>
-<li><a name='sliderfunction_y' href='#sliderfunction_y top'> sliderfunction_y some_function_in_y</a><ul>
+<li><a name='sliderfunction_y' href='#sliderfunction_y top'>  sliderfunction_y some_function_in_y</a><ul>
 <li><span style="color:blue;font-size:0.8em"> default value "y"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the y-value of the slider object(s) will be calculated with this function.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only used by command 'slider'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> define before a slider command !
 </span></li>
 </ul>
-<li><a name='sgraph' href='#sgraph top'> sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color</a><ul>
+<li><a name='sgraph' href='#sgraph top'>  sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> primitive implementation of a 'broken scale' graph...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> not very versatile: only usable in combination with userdraw <br />eg no other objects will obey this "coordinate system"<br />if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is 'lost'.<br />Use these "formulas" to recalculate the virtual coordinates:<br />factor=0.8 in case xstart != xmin (or ystart != ymin)<br />factor=0.9 in case xstart = xmin (or ystart = ymin)<br />px_x_point = ((factor*xsize)/(xmax - xstart))*(x_point - xmax)+xsize<br />x_recalculated = px*(xmax - xmin)/xsize + $xmin<br />px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart)<br />y_recalculated = ymax - py*(ymax - ymin)/ysize<br />
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />size 400,400<br />xrange 0,10000<br />yrange 0,100<br />sgraph 9000,50,100,10,4,4,grey,blue<br />userinput_xy<br />linewidth 2<br />userdraw segments,red
 </span></li>
 </ul>
-<li><a name='snaptofunction' href='#snaptofunction top'> snaptofunction some_function_in_x,some_funtion_in_y</a><ul>
+<li><a name='snaptofunction' href='#snaptofunction top'>  snaptofunction some_function_in_x,some_funtion_in_y</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='snaptofun' href='#snaptofun top'>snaptofun</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> the next object will snap to the calculated values
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you want only modification of y-values,just use: snaptofunction x,5*sin(1/y)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you want only modification of x-values,just use: snaptofunction 5*sin(1/x),y
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> for now only one instance of 'snaptofunction' is allowed
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use rawmath on your functions: no validity checking is done by wims !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />....<br />snaptofunction 5*(cos(x),4*sin(y)<br />linewidth 3<br />userdraw points,blue<br />....<br />
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example : switching x and y coordinates?<br />snaptofunction y,x
 </span></li>
 </ul>
-<li><a name='snaptopoints' href='#snaptopoints top'> snaptopoints x1,y1,x2,y2,x3,y3....</a><ul>
+<li><a name='snaptopoints' href='#snaptopoints top'>  snaptopoints x1,y1,x2,y2,x3,y3....</a><ul>
 <li><span style="color:blue;font-size:0.8em"> a userdraw object will snap to these points.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the array size (e.g. the number of points) of command 'snaptopoints' is limited by constant MAX_INT (canvasdraw.h)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a draggable object (use command "drag x|y|xy") will snap to the clossed of these points when dragged (mouseup)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> other options: use keyword "snaptogrid", "xsnaptogrid" or "ysnaptogrid"
 </span></li>
 </ul>
-<li><a name='snaptogrid' href='#snaptogrid top'> snaptogrid</a><ul>
+<li><a name='snaptogrid' href='#snaptogrid top'>  snaptogrid</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a draggable object (use command "drag x|y|xy") will snap to the given grid when dragged (mouseup)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of userdraw the drawn points will snap to xmajor / ymajor grid
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if no grid is defined ,points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if xminor / yminor is defined,(use keyword 'axis' to activate the minor steps) the drawing will snap to xminor and yminor<br />use only even dividers in x/y-minor...for example<br />snaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red<br /> will snap on x=0, x=0.5, x=1, x=1.5 ....<br /> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br />
 </span></li>
 </ul>
-<li><a name='square' href='#square top'> square x,y,side (px) ,color</a><ul>
+<li><a name='square' href='#square top'>  square x,y,side (px) ,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw a square with left top corner (x:y) with side 'side' in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fsquare x,y,side,color' for a filled square
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command/keyword <a href='#filled'>'filled'</a> before command 'square x,y,side,color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='status' href='#status top'> status</a><ul>
+<li><a name='status' href='#status top'>  status</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> alernative : nostatus
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> used to override the effects of "status=done" in wims (answer.phtml)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> affects 'readonly' in inputfields / textarea's in canvasimage and all userdraw based commands
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> e.g.: if keyword 'status' is set, the pupil will be able to modify the canvas when the 'wims $status variable' is set to 'done'
 </span></li>
 </ul>
-<li><a name='string' href='#string top'> string color,x,y,the text string</a><ul>
+<li><a name='string' href='#string top'>  string color,x,y,the text string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> may be set "onclick" or "drag xy"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> unicode supported: string red,0,0,\u2232
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use a command like 'fontfamily italic 24px Ariel' <br />to set fonts on browser that support font change
 </span></li>
 </ul>
-<li><a name='stringup' href='#stringup top'> stringup color,x,y,rotation_degrees,the text string</a><ul>
+<li><a name='stringup' href='#stringup top'>  stringup color,x,y,rotation_degrees,the text string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy" (because of translaton matrix...mouse incompatible)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> unicode supported: stringup red,0,0,45,\u2232
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use a command like 'fontfamily bold 34px Courier' <br />to set fonts on browser that support font change
 </span></li>
 </ul>
-<li><a name='highlight' href='#highlight top'> highlight color,opacity,linewidth</a><ul>
+<li><a name='highlight' href='#highlight top'>  highlight color,opacity,linewidth</a><ul>
 <li><span style="color:blue;font-size:0.8em"> NOT IMPLEMENTED
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "onclick" : when the object receives a userclick it will increase its linewidth
 </span></li>
 </ul>
-<li><a name='strokecolor' href='#strokecolor top'> strokecolor colorname or #hex</a><ul>
+<li><a name='strokecolor' href='#strokecolor top'>  strokecolor colorname or #hex</a><ul>
 <li><span style="color:blue;font-size:0.8em"> to be used for commands that do not supply a color argument (like command 'linegraph')
 </span></li>
 </ul>
-<li><a name='text' href='#text top'> text fontcolor,x,y,font,text_string</a><ul>
+<li><a name='text' href='#text top'>  text fontcolor,x,y,font,text_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> font may be described by keywords : giant,huge,normal,small,tiny
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize' to increase base fontsize for these keywords
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set "onclick" or "drag xy"
 <li><span style="color:blue;font-size:0.8em"> use command 'string' combined with 'fontfamily' for a more fine grained control over html5 canvas text element
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> Avoid mixing old flydraw commands 'text' 'textup' with new canvasdraw commands 'string' stringup'<br />If the fontfamily was set completely like "fontfamily italic 24px Ariel".<br />In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
 </span></li>
 </ul>
-<li><a name='textarea' href='#textarea top'> textarea x,y,cols,rows,readonly,value</a><ul>
+<li><a name='textarea' href='#textarea top'>  textarea x,y,cols,rows,readonly,value</a><ul>
 <li><span style="color:blue;font-size:0.8em"> may be further controlled by <a href="#inputstyle">"inputstyle"</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if "$status=done" (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br />override this by keyword <a href="#status">'status'.</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> keyword 'xoffset | centered' is not active for commande 'textarea'
 </span></li>
 </ul>
-<li><a name='textfill' href='#textfill top'> textfill x0,y0,color,some_text</a><ul>
+<li><a name='textfill' href='#textfill top'>  textfill x0,y0,color,some_text</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x0,y0 in xrange / yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> color will be used for the font color
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#fontfamily">fontfamily</a> to set font type and size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> there is also a command <a href="#userdraw">userdraw textfill,color,some_text</a>
 </span></li>
 </ul>
-<li><a name='textup' href='#textup top'> textup fontcolor,x,y,font,text_string</a><ul>
+<li><a name='textup' href='#textup top'>  textup fontcolor,x,y,font,text_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy" (because of translaton matrix...mouse incompatible)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> font may be described by keywords : giant,huge,normal,small,tiny
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize' to increase base fontsize for the keywords
 <li><span style="color:blue;font-size:0.8em"> use command 'stringup' and 'fontfamily' for a more fine grained control over html5 canvas text element
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> Avoid mixing old flydraw commands 'text' 'textup' with new canvasdraw commands 'string' stringup'<br />If the fontfamily was set completely like "fontfamily italic 24px Ariel".<br />In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
 </span></li>
 </ul>
-<li><a name='trace_jscurve' href='#trace_jscurve top'> trace_jscurve some_math_function</a><ul>
+<li><a name='trace_jscurve' href='#trace_jscurve top'>  trace_jscurve some_math_function</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will use a crosshair to trace the jsmath curve
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> two inputfields will display the current x/y-values (numerical evaluation by javascript)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default labels 'x' and 'y'<br />use commands 'xlabel some_x_axis_name' and 'ylabel some_y_axis_name' to customize the labels for the input fields
 <li><span style="color:blue;font-size:0.8em"> the client browser will convert your math function to javascript math.<br />use parenthesis and rawmath : use 2*x instead of 2x etc etc<br />no check is done on the validity of your function and/or syntax<br />use error console to debug any errors...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> be aware that the formula's of the plotted function(s) can be found in the page javascript source
 </span></li>
 </ul>
-<li><a name='trange' href='#trange top'> trange tmin,tmax</a><ul>
+<li><a name='trange' href='#trange top'>  trange tmin,tmax</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='ranget' href='#ranget top'>ranget</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> default -2,2
 </span></li>
 </ul>
-<li><a name='translation' href='#translation top'> translation tx,ty</a><ul>
+<li><a name='translation' href='#translation top'>  translation tx,ty</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='translate' href='#translate top'>translate</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> will translate the next objects tx in xrange and ty in yrange
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'killtranstation' to end the command
 </span></li>
 </ul>
-<li><a name='triangle' href='#triangle top'> triangle x1,y1,x2,y2,x3,y3,color</a><ul>
+<li><a name='triangle' href='#triangle top'>  triangle x1,y1,x2,y2,x3,y3,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use ftriangle or keyword <a href='#filled'>'filled'</a> for a solid triangle
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='triangles' href='#triangles top'> triangles color,x1,y1,x2,y2,x3,y3,...</a><ul>
+<li><a name='triangles' href='#triangles top'>  triangles color,x1,y1,x2,y2,x3,y3,...</a><ul>
 <li><span style="color:blue;font-size:0.8em"> use ftriangles or keyword <a href='#filled'>'filled'</a> for solid triangles
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 </ul>
-<li><a name='userboxplot' href='#userboxplot top'> userboxplot</a><ul>
+<li><a name='userboxplot' href='#userboxplot top'>  userboxplot</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword, no arguments
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href="#boxplot">'boxplot x_or_y,box-height_or_box-width,x_or_y-position'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the 'draw_boxplot' function
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> for example:<br />put the canvas-script into a html element with id='boxplot'and set style='display:none'<br />define a variable called 'student_boxplot' and fill it with the 5 student-data (from inputfields or something)<br />var student_boxplot = new Array(5)<br />function show_boxplot(){<br />student_boxplot[0] = min;<br />student_boxplot[1] = Q1;<br />student_boxplot[2] = median;<br />student_boxplot[3] = Q3;<br />student_boxplot[4] = max;<br />document.getElementById('boxplot').style.display = "block";<br />draw_boxplot(12345,1,2.00,5.00,[0,0,0,0,0],4,"0,0,255",0.78,"255,165,0",0.60,1,0,1,1);<br />};<br />In the canvas-script the function draw_boxplot has the following arguments:<br />draw_boxplot=function(canvas_type,xy,hw,cxy,data,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1)
 </span></li>
 </ul>
-<li><a name='userboxplotdata' href='#userboxplotdata top'> userboxplotdata</a><ul>
+<li><a name='userboxplotdata' href='#userboxplotdata top'>  userboxplotdata</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword, no arguments
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before command <a href="#boxplot">'boxplot x_or_y,box-height_or_box-width,x_or_y-position'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set, the student will have to generate some statistical data. These data should be put in a named array "student_boxplot_data"
 <li><span style="color:blue;font-size:0.8em"> "min,Q1,median,Q3,max" are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> see command <a href="#userboxplot">'userboxplot'</a> for calling 'draw_boxplot()'
 </span></li>
 </ul>
-<li><a name='userdraw' href='#userdraw top'> userdraw object_type,color</a><ul>
+<li><a name='userdraw' href='#userdraw top'>  userdraw object_type,color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> only a single object_type is allowed.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> for multiple object user drawings use command <a href="#multidraw">'multidraw'</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> implemented object_type: <ul><li>point</li><li>points</li><li>crosshair</li><li>crosshairs</li><li>line</li><li>lines</li><li>vline</li><li>vlines</li><li>hline</li><li>hlines</li><li>demiline</li><li>demilines</li><li>segment</li><li>segments</li><li>polyline | brokenline </li><li>circle</li><li>circles</li><li>arrow</li><li>arrow2 (double arrow)</li><li>arrows</li><li>arrows2 (double arrows)</li><li>triangle</li><li>polygon</li><li>poly[3-9] (e.g poly3 ... poly7...poly9 </li><li>rect</li><li>roundrect</li><li>rects</li><li>roundrects</li><li>freehandline | path</li><li>freehandlines | paths</li><li>clickfill : fill the clicked area with color<br />multiple areas may be selected <br />multiple colors may be provided using commands <a href='#colorpalette'>colorpalette color1,color2,color3,...</a> or <a href='#multifillcolors'>multifillcolors color1,color2,color_3,...</a> use <a href='#replyformat'>replyformat 10</a> for checking the user click color ... reply=x1:y1:color1,x2:y2:color2...<br/>attention: this will <b>not</b> work for pattern filling, because the pattern image is only generated once and after creation can not be changed !<br />the opacity of this image on a separate canvas is set to 0.01 and not 0 (!!)...in the 'fill algorithm' the opacity of the matching pixels is set to 1</li><li>dotfill : fill the clicked area with a dot pattern; use command linewidth to change dot size</li><li>diamondfill : fill the clicked area with a diamond pattern</li><li>hatchfill : fill the clicked area with a hatch pattern</li><li>gridfill : fill the clicked area with a grid pattern</li><li>textfill: fill the clicked area with a repeating string<br />userdraw textfill,blue,some_text<br />use command <a href="#fontfamily">fontfamily</a> to adjust text style and size</li><li>'clickfill | pattern filling' in general:<br />the clicks may be set <a href="#snaptogrid">'snaptogrid'</a><br />can be used together with command <a href="#floodfill">'floodfill' or 'fill'</a><br /><b>always</b> use together with command <a href="clearbutton">'clearbutton some_text'</a> for removal of all click_colored areas<br />the function read_canvas() will return the click coordinates in the sequence of the user clicks<br />use command <a href="#canvastype">'canvastype'</a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)</li><li>text</li><li>arc</li><li>arcs</li><li>input<br/>place a single inputfield on 'canvas'<br />use commands 'inputstyle' for css styling: use command 'linewidth' for adjusting the input field size (default 1)</li><li>inputs<br/>place multiple inputfield : placing inputfields on top of each other is not possible</li></ul>
 <li><span style="color:blue;font-size:0.8em"> may be combined with keyword 'userinput_xy'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature <br />To avoid trouble do not use zooming / panning together width userdraw.!<br />use command <a href="#multidraw">multidraw</a> is this is a problem for you...
 </span></li>
 </ul>
-<li><a name='userinput' href='#userinput top'> userinput function | textarea | inputfield</a><ul>
+<li><a name='userinput' href='#userinput top'>  userinput function | textarea | inputfield</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='userinput_function' href='#userinput_function top'>userinput_function</a></span></li>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='userinput_textarea' href='#userinput_textarea top'>userinput_textarea</a></span></li>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='userinput_xy' href='#userinput_xy top'>userinput_xy</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> textarea and inputfield are only usable in combination with some 'userdraw draw_ type'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'inputstyle some_css' to adjust the inputfields
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize int' to adjust the label fonts. (default 12px)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the user input for the function will be corrected by a simple 'rawmath' implementation...<br />an error message will be shown if javascript can not interpret the user input
 </span></li>
 </ul>
-<li><a name='userinput_xy' href='#userinput_xy top'> userinput_xy</a><ul>
+<li><a name='userinput_xy' href='#userinput_xy top'>  userinput_xy</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used in combination with command "userdraw object_type,color"
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set two (or three) input fields are added to the document<br />(one for x-values , one for y-values and in case of drawing circle one for radius-values)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
-</span></li>
-<li><span style="color:blue;font-size:0.8em"> math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...)<br />eval function is 'protected' against code injection.
 </span></li>
+<li><span style="color:blue;font-size:0.8em"> math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...)<br />eval function is 'protected' against code injection.
+</span></li>
 <li><span style="color:blue;font-size:0.8em"> can <b>not</b> be combined with command "intooltip tiptext" <br />note: the 'tooltip div element' is used for placing inputfields
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> user drawings will not zoom on zooming (or pan on panning)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'inputstyle some_css' to adjust the inputarea.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize int' to adjust the text labels (if needed)
 </span></li>
 </ul>
-<li><a name='userinput_function' href='#userinput_function top'> userinput_function</a><ul>
+<li><a name='userinput_function' href='#userinput_function top'>  userinput_function</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set , a inputfield will be added to the page
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> repeat keyword for more function input fields
 <li><span style="color:blue;font-size:0.8em"> this value may be read with 'read_canvas()'. <br />for do it yourself js-scripters : If this is the first inputfield in the script, its id is canvas_input0
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use before this command 'userinput_function',<br />commands like 'inputstyle some_css' , 'xlabel some_description' , 'opacity int,int' , 'linewidth int' , 'dashed' and 'dashtype int,int' to modify
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> fontsize can be set using command 'fontsize int'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> incompatible with command 'intooltip link_text_or_image' : it uses the tooltip div for adding the inputfield
 </span></li>
 </ul>
-<li><a name='usertextarea_xy' href='#usertextarea_xy top'> usertextarea_xy</a><ul>
+<li><a name='usertextarea_xy' href='#usertextarea_xy top'>  usertextarea_xy</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used in combination with command "userdraw object_type,color" wherein object_type is only segment / polyline for the time being...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if set two textareas are added to the document<br />(one for x-values , one for y-values)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> user drawings will not zoom on zooming (or pan on panning)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'inputstyle some_css' to adjust the inputarea.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'fontsize int' to adjust the text labels (if needed)
 </span></li>
 </ul>
-<li><a name='vline' href='#vline top'> vline x,y,color</a><ul>
+<li><a name='vline' href='#vline top'>  vline x,y,color</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='verticalline' href='#verticalline top'>verticalline</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw a vertical line through point (x:y) in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
 </span></li>
 </ul>
-<li><a name='vlines' href='#vlines top'> vlines color,x1,y1,x2,y2....</a><ul>
+<li><a name='vlines' href='#vlines top'>  vlines color,x1,y1,x2,y2....</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='verticallines' href='#verticallines top'>verticallines</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> draw vertical lines through points (x1:y1),(x2:y2)... in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
 </span></li>
 </ul>
-<li><a name='video' href='#video top'> video x,y,w,h,videofile location</a><ul>
+<li><a name='video' href='#video top'>  video x,y,w,h,videofile location</a><ul>
 <li><span style="color:blue;font-size:0.8em"> x,y : left top corner of audio element (in xrange / yrange)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> w,y : width and height in pixels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />wims getfile : video 0,0,120,120,myvideo.mp4
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> video format may be in *.mp4 (todo:other formats)
 </span></li>
 </ul>
-<li><a name='xaxis' href='#xaxis top'> xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
+<li><a name='xaxis' href='#xaxis top'>  xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='xaxistext' href='#xaxistext top'>xaxistext</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> usable for commands <a href="numberline">numberline</a> and <a href="grid">grid</a> or combinations thereof
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use these x-axis num1...num_n values instead of default xmin...xmax
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of command 'grid' . there is no need to use keyword <a href="#axisnumbering">axisnumbering</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="grid">grid</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "fontcolor", "fontfamily" to adjust font <br />defaults: black,12,Ariel<br />note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a javascript error message will flag non-matching value:name pairs
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if the 'x-axis words' are too big and will overlap, a simple alternating offset will be applied
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />size 400,400<br />xrange 0,13<br />yrange -100,500<br />axis<br />xaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december<br />#'xmajor' steps should be synchronised with numbers eg. "1" in this example<br />grid 1,100,grey,1,4,6,grey
 </span></li>
 </ul>
-<li><a name='xaxisup' href='#xaxisup top'> xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
+<li><a name='xaxisup' href='#xaxisup top'>  xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='xaxistextup' href='#xaxistextup top'>xaxistextup</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> the text will be rotated 90&deg; up
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="grid">grid</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use these x-axis num1...num_n values instead of default xmin...xmax
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "fontcolor","fontfamily" to adjust font <br />defaults: black,12,Ariel<br />note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a javascript error message will flag non-matching value:name pairs
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if the 'x-axis words' are too big, they will overlap the graph<br /> (in this case the text will start from ysize upwards)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />size 400,400<br />xrange 0,13<br />yrange -100,500<br />axis<br />xaxisup 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december<br />#'xmajor' steps should be synchronised with numbers eg. "1" in this example<br />grid 1,100,grey,1,4,6,grey
 </span></li>
 </ul>
-<li><a name='xerrorbars' href='#xerrorbars top'> xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
+<li><a name='xerrorbars' href='#xerrorbars top'>  xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw multiple points with x-errorbars E1 (error value left from point) and E2 (error value right from point) at given coordinates in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the errors E1 and E2 values are in xrange.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adust size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 </ul>
-<li><a name='xrange' href='#xrange top'> xrange xmin,xmax</a><ul>
+<li><a name='xrange' href='#xrange top'>  xrange xmin,xmax</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='rangex' href='#rangex top'>rangex</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> if not given: 0,xsize (eg in pixels)
 </span></li>
 </ul>
-<li><a name='xsnaptogrid' href='#xsnaptogrid top'> xsnaptogrid</a><ul>
+<li><a name='xsnaptogrid' href='#xsnaptogrid top'>  xsnaptogrid</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a draggable object (use command "drag x|y|xy") will snap to the given x-grid values when dragged (mouseup)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of userdraw the drawn points will snap to xmajor grid
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if no grid is defined ,points will snap to every integer xrange value. (eg snap_x=1)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if xminor is defined (use keyword 'axis' to activate xminor), the drawing will snap to xminor <br />use only even dividers in x-minor...for example<br />xsnaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red<br /> will snap on x=0, x=0.5, x=1, x=1.5 ....<br /> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br />
 </span></li>
 </ul>
-<li><a name='xoffset' href='#xoffset top'> xoffset | centered</a><ul>
+<li><a name='xoffset' href='#xoffset top'>  xoffset | centered</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword ; to place the text centered above the text coordinates(x:y) ...
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be used for points or other things requirering centered labels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-library)
 </span></li>
 </ul>
-<li><a name='xyoffset' href='#xyoffset top'> xyoffset</a><ul>
+<li><a name='xyoffset' href='#xyoffset top'>  xyoffset</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be used for points or other things requirering labels
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of inputfields the inputfield will be centered x and y on it's coordinates.<br />for example:<br />inputs 1,1,10,? <br />point 1,1,red <br /> the point will be completely invisible<br />note: keyword 'xyoffset' will also provide centering if used with <a href='#<li><span style="color:blue;font-size:0.8em">userdraw'>input(s),color</a>
 </span></li>
 </ul>
-<li><a name='xunit' href='#xunit top'> xunit some_unit_for_x-values</a><ul>
+<li><a name='xunit' href='#xunit top'>  xunit some_unit_for_x-values</a><ul>
 <li><span style="color:blue;font-size:0.8em"> unicode allowed (no html code)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use together with command mousex
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will display the cursor x-coordinate in 'unit'
 </span></li>
 </ul>
-<li><a name='xlabel' href='#xlabel top'> xlabel some_string</a><ul>
+<li><a name='xlabel' href='#xlabel top'>  xlabel some_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will be used to create a label for the x-axis (label is in quadrant I)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can only be used together with command 'grid'</a><br />not depending on keywords 'axis' and 'axisnumbering'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br />use command "fontsize" to adjust.<br />(command "fontfamily" is not active for this command)
 </span></li>
 </ul>
-<li><a name='xlogbase' href='#xlogbase top'> xlogbase number</a><ul>
+<li><a name='xlogbase' href='#xlogbase top'>  xlogbase number</a><ul>
 <li><span style="color:blue;font-size:0.8em"> sets the logbase number for the x-axis
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default value 10
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use together with commands xlogscale / xylogscale
 </span></li>
 </ul>
-<li><a name='xlogscale' href='#xlogscale top'> xlogscale ymajor,yminor,majorcolor,minorcolor</a><ul>
+<li><a name='xlogscale' href='#xlogscale top'>  xlogscale ymajor,yminor,majorcolor,minorcolor</a><ul>
 <li><span style="color:blue;font-size:0.8em"> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> ymajor is the major step on the y-axis; yminor is the divisor for the y-step
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the linewidth is set using command 'linewidth int'
 <li><span style="color:blue;font-size:0.8em"> note: in case of userdraw , the use of keyword <a href='#userinput_xy'>'userinput_xy'</a> may be handy !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: keyword 'snaptogrid' may not lead to the desired result...
 </span></li>
 </ul>
-<li><a name='xylogscale' href='#xylogscale top'> xylogscale majorcolor,minorcolor</a><ul>
+<li><a name='xylogscale' href='#xylogscale top'>  xylogscale majorcolor,minorcolor</a><ul>
 <li><span style="color:blue;font-size:0.8em"> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the linewidth is set using command 'linewidth int'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the opacity of major / minor grid lines is set by command 'opacity [0-255],[0-255]'
 <li><span style="color:blue;font-size:0.8em"> note: in case of userdraw , the use of keyword 'userinput_xy' may be handy !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: keyword 'snaptogrid' may not lead to the desired result...
 </span></li>
 </ul>
-<li><a name='yaxis' href='#yaxis top'> yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
+<li><a name='yaxis' href='#yaxis top'>  yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> alternativ : yaxistext num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command "fontcolor", "fontfamily" to adjust font <br />defaults: black,12,Ariel<br /> note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
 <li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> example:<br />size 400,400<br />yrange 0,13<br />xrange -100,500<br />axis<br />yaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december<br />#'ymajor' steps should be synchronised with numbers eg. "1" in this example<br />grid 100,1,grey,4,1,6,grey
 </span></li>
 </ul>
-<li><a name='yerrorbars' href='#yerrorbars top'> yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
+<li><a name='yerrorbars' href='#yerrorbars top'>  yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
 <li><span style="color:blue;font-size:0.8em"> draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the errors E1 and E2 values are in yrange.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adust size
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
 </span></li>
 </ul>
-<li><a name='yoffset' href='#yoffset top'> yoffset</a><ul>
+<li><a name='yoffset' href='#yoffset top'>  yoffset</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword, only active for commands <a href="#textup">textup</a> and <a href="#stringup">stringup</a>
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> places the text <b>under</b> the (x:y) coordinates(x:y)<br/ >eg the string 'hello' will end at char 'o' on (x:y) <br />normal behaviour : string starts at (x:y)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> string ending on (x:y) is valid for all rotation angles
 <li><span style="color:blue;font-size:0.8em"> may be used for points or other things requirering labels in y-direction
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> other text position manipulations: see <a href="#xoffset">xoffset</a> for centering on x-coordinate or <a href="#xyoffset">xyoffset</a> label placement for points etc.
 </span></li>
 </ul>
-<li><a name='yrange' href='#yrange top'> yrange ymin,ymax</a><ul>
+<li><a name='yrange' href='#yrange top'>  yrange ymin,ymax</a><ul>
 <li><span style="color:blue;font-size:0.8em">alternative command:<a name='rangey' href='#rangey top'>rangey</a></span></li>
 <li><span style="color:blue;font-size:0.8em"> if not given 0,ysize (eg in pixels)
 </span></li>
 </ul>
-<li><a name='ysnaptogrid' href='#ysnaptogrid top'> ysnaptogrid</a><ul>
+<li><a name='ysnaptogrid' href='#ysnaptogrid top'>  ysnaptogrid</a><ul>
 <li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> a draggable object (use command "drag x|y|xy") will snap to the given y-grid values when dragged (mouseup)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> in case of userdraw the drawn points will snap to ymajor grid
 <li><span style="color:blue;font-size:0.8em"> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> if yminor is defined (use keyword 'axis' to activate yminor), the drawing will snap to yminor <br />use only even dividers in y-minor...for example<br />ysnaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red<br /> will snap on x=0, x=0.5, x=1, x=1.5 ....<br /> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br />
 </span></li>
 </ul>
-<li><a name='ylabel' href='#ylabel top'> ylabel some_string</a><ul>
+<li><a name='ylabel' href='#ylabel top'>  ylabel some_string</a><ul>
 <li><span style="color:blue;font-size:0.8em"> will be used to create a (vertical) label for the y-axis (label is in quadrant I)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> can only be used together with command <a href="#grid">'grid'</a><br />not depending on keywords 'axis' and 'axisnumbering'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br />use command "fontsize" to adjust.<br />(command "fontfamily" is not active for this command)
 </span></li>
 </ul>
-<li><a name='ylogbase' href='#ylogbase top'> ylogbase number</a><ul>
+<li><a name='ylogbase' href='#ylogbase top'>  ylogbase number</a><ul>
 <li><span style="color:blue;font-size:0.8em"> sets the logbase number for the y-axis
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> default value 10
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use together with commands ylogscale / xylogscale
 </span></li>
 </ul>
-<li><a name='ylogscale' href='#ylogscale top'> ylogscale xmajor,xminor,majorcolor,minorcolor</a><ul>
+<li><a name='ylogscale' href='#ylogscale top'>  ylogscale xmajor,xminor,majorcolor,minorcolor</a><ul>
 <li><span style="color:blue;font-size:0.8em"> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> xmajor is the major step on the x-axis; xminor is the divisor for the x-step
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the linewidth is set using command 'linewidth int'
 <li><span style="color:blue;font-size:0.8em"> note: in case of userdraw , the use of keyword 'userinput_xy' may be handy !
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> <b>attention</b>: keyword 'snaptogrid' may not lead to the desired result...
 </span></li>
 </ul>
-<li><a name='yunit' href='#yunit top'> yunit some_unit_for_y-values</a><ul>
+<li><a name='yunit' href='#yunit top'>  yunit some_unit_for_y-values</a><ul>
 <li><span style="color:blue;font-size:0.8em"> unicode allowed (no html code)
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> use together with command mousey
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> will display the cursor y-coordinate in 'unit'
 </span></li>
 </ul>
-<li><a name='zoom' href='#zoom top'> zoom button_color</a><ul>
+<li><a name='zoom' href='#zoom top'>  zoom button_color</a><ul>
 <li><span style="color:blue;font-size:0.8em"> introduce a very small 'controlpanel' at the lower right corner
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> giving six 15&times;15px 'active' rectangle areas<br />(for &times;,leftarrow,rightarrow,uparrow,downarrow and a '-' and a '+' sign ) for zooming and/or panning of the image
 </span></li>
 <li><span style="color:blue;font-size:0.8em"> the 'x' symbol will do a 'location.reload' of the page, and thus reset all canvas drawings.
 </ul>
 <script type='text/javascript'>
  var keys = ['canvasdraw' ,'canvasdraw','affine','angle','animate','arc','arrow','vector','arrows','vectors','arrow2','arrows2','arrowhead','audio','axisnumbering','axis','barchart','bezier','bgcolor','bgimage','blink','boxplot','boxplotdata','canvastype','centerstring','circle','circles','disks','clearbutton','delete','erase','clock','colorpalette','copy','copyresized','crosshair','crosshairs','crosshairsize','cursor','pointer','curve','dashed','dashtype','diamondfill','dotfill','drag','ellipse','fillall','filled','fillcolor','fillpattern','filltoborder','floodfill','fill','fontcolor','fontfamily','fontsize','functionlabel','grid','gridfill','demiline','halfline','demilines','halflines','hatchfill','hline','horizontalline','hlines','horizontallines','http','html','imagefill','inputstyle','input','intooltip','jscurve','jsplot','jsmath','killaffine','killrotate','killslider','killtranslation','killtranslate','line','lines','linewidth','lattice','levelcurve','legend','legendcolors','linegraph','mathml','mouse','mouse_degree','display','precision','mousex','mousey','multidash','multidraw','multilabel','multilinewidth','multifill','multifillcolors','multifillopacity','multisnaptogrid','multistrokecolors','multistrokeopacity','multiuserinput','noaxis','noayis','numberline','opacity','transparent','onclick','parallel','plotsteps','point','points','poly','polyline','popup','protractor','pixels','pixelsize','piechart','rays','rect','rects','replyformat','roundrect','roundrects','ruler','resetoffset','rotate','rotationcenter','size','segment','seg','segments','segs','setlimits','setpixel','slider','sliderfunction_x','sliderfunction_y','sgraph','snaptofunction','snaptofun','snaptopoints','snaptogrid','square','status','string','stringup','highlight','strokecolor','text','textarea','textfill','textup','trace_jscurve','trange','ranget','translation','translate','triangle','triangles','userboxplot','userboxplotdata','userdraw','userinput','userinput_function','userinput_textarea','userinput_xy','userinput_xy','userinput_function','usertextarea_xy','vline','verticalline','vlines','verticallines','video','xaxis','xaxistext','xaxisup','xaxistextup','xerrorbars','xrange','rangex','xsnaptogrid','xoffset','xyoffset','xunit','xlabel','xlogbase','xlogscale','xylogscale','yaxis','yerrorbars','yoffset','yrange','rangey','ysnaptogrid','ylabel','ylogbase','ylogscale','yunit','zoom'];
  var keys_len = keys.length;
  function match(s1,s2){
- var n1 = s1.length;
+  var n1 = s1.length;
- if(n1 < 3){return 0;}
+  if(n1 < 3){return 0;}
- var n2 = s2.length;
+  var n2 = s2.length;
- var c1,c2,found;
+  var c1,c2,found;
- var count = n1 - Math.abs(n1 - n2);
+  var count = n1 - Math.abs(n1 - n2);
- for(var p = 0;p < n1;p++){
+  for(var p = 0;p < n1;p++){
- c1=s1.charAt(p);
+   c1=s1.charAt(p);
- found = false;
+   found = false;
- for(var i = 0;i < n2;i++){
+   for(var i = 0;i < n2;i++){
- c2 = s2.charAt(i);
+    c2 = s2.charAt(i);
- if(c1 == c2){found = true;count = count + n1 - Math.abs(p - i);}
+    if(c1 == c2){found = true;count = count + n1 - Math.abs(p - i);}
- };
+   };
- if(! found ){count = count - n2;}
+   if(! found ){count = count - n2;}
- };
+  };
- return count;
+  return count;
  };
  function look(){
- var s = ((document.getElementById('search').value).replace(/\s/g, '')).toLowerCase();
+  var s = ((document.getElementById('search').value).replace(/\s/g, '')).toLowerCase();
- var typo;var next_best = -1;var next_idx = s.length;var tmp;var ss;
+  var typo;var next_best = -1;var next_idx = s.length;var tmp;var ss;
- for(var p = 0; p < keys_len ; p++){
+  for(var p = 0; p < keys_len ; p++){
- ss = keys[p];
+   ss = keys[p];
- if( s == ss ){
+   if( s == ss ){
- window.location.href = '#'+ss;
+    window.location.href = '#'+ss;
- return;
+    return;
- };
+   };
- /* not ok? ... try to find a match for a reasonable typo... */
+   /* not ok? ... try to find a match for a reasonable typo... */
- tmp = match(s,ss);
+   tmp = match(s,ss);
- if(tmp > next_idx){
+   if(tmp > next_idx){
- next_idx = tmp;
+    next_idx = tmp;
- next_best = p;
+    next_best = p;
- };
+   };
- };
+  };
- if(next_best != -1 ){
+  if(next_best != -1 ){
- typo = keys[next_best];
+   typo = keys[next_best];
- if(confirm('"'+s+'" is not a valid canvasdraw command\ndid you mean "'+typo+'" ?')){
+   if(confirm('"'+s+'" is not a valid canvasdraw command\ndid you mean "'+typo+'" ?')){
- window.location.href = '#'+typo;
+    window.location.href = '#'+typo;
- return;
+    return;
- };
+   };
- }
+  }
- else
+  else
- {
+  {
- alert(s+' is not a valid canvasdraw command');
+   alert(s+' is not a valid canvasdraw command');
- };
+  };
- return;
+  return;
  };
 </script>

Subversion Repositories wimsdev

(root)/trunk/wims/public_html/scripts/help/en/canvasdraw.phtml @ 13419 – Rev 11922 → 11930