File: canvasdraw.phtml

package info (click to toggle)
wims 2%3A4.29a%2Bdfsg1-3
links: PTS, VCS
area: main
in suites: trixie
size: 185,704 kB
sloc: xml: 366,687; javascript: 120,570; ansic: 62,341; java: 62,170; sh: 7,744; perl: 3,937; yacc: 3,217; cpp: 1,915; lex: 1,805; makefile: 1,084; lisp: 914; pascal: 601; python: 520; php: 318; asm: 7
file content (4901 lines) | stat: -rw-r--r-- 265,815 bytes
!!generated by Misc/canvasdraw/canvasinfo.sh | Do NOT Modify here.
<div class='wims_search_engine'><div class='wimscenter'>
  <label for='search'>enter a command name</label>
  <input type='search' id='search'
         onkeydown='javascript:if(event.keyCode == 13){look();}'><button class='wims_button icon_button' type='submit' onclick='javascript:look();'>
  <span class='Searching'>$wims_name_search</span></button>
</div></div>
<h2 class='wims_title'>Implemented canvasdraw commands (10-01-2025)</h2>
<ul class='flex_box grid-x small-up-3 medium-up-4 large-up-8 small'>

<li class='card cell'><div class='card-section'>
<a id='canvasdraw_top' href='#canvasdraw'>canvasdraw</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='affine_top' href='#affine'>affine</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='duplicates_top' href='#duplicates'>duplicates</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='angle_top' href='#angle'>angle</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='animate_top' href='#animate'>animate</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arc_top' href='#arc'>arc</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrowarc_top' href='#arrowarc'>arrowarc</a>
<a href='#arrowarc'>arcarrow</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrow_top' href='#arrow'>arrow</a>
<a href='#arrow'>vector</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrows_top' href='#arrows'>arrows</a>
<a href='#arrows'>vectors</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrow2_top' href='#arrow2'>arrow2</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrows2_top' href='#arrows2'>arrows2</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='arrowhead_top' href='#arrowhead'>arrowhead</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='audio_top' href='#audio'>audio</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='axisnumbering_top' href='#axisnumbering'>axisnumbering</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='axis_top' href='#axis'>axis</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='barchart_top' href='#barchart'>barchart</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='bezier_top' href='#bezier'>bezier</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='bgcolor_top' href='#bgcolor'>bgcolor</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='bgimage_top' href='#bgimage'>bgimage</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='blink_top' href='#blink'>blink</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='boxplot_top' href='#boxplot'>boxplot</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='boxplotdata_top' href='#boxplotdata'>boxplotdata</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='canvastype_top' href='#canvastype'>canvastype</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='centered_top' href='#centered'>centered</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='centerstring_top' href='#centerstring'>centerstring</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='circle_top' href='#circle'>circle</a>
<a href='#circle'>disk</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='circles_top' href='#circles'>circles</a>
<a href='#circles'>disks</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='clearbutton_top' href='#clearbutton'>clearbutton</a>
<a href='#clearbutton'>delete</a>
<a href='#clearbutton'>erase</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='clock_top' href='#clock'>clock</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='colorpalette_top' href='#colorpalette'>colorpalette</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='copy_top' href='#copy'>copy</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='copyresized_top' href='#copyresized'>copyresized</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='crosshair_top' href='#crosshair'>crosshair</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='crosshairs_top' href='#crosshairs'>crosshairs</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='crosshairsize_top' href='#crosshairsize'>crosshairsize</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='css_top' href='#css'>css</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='cursor_top' href='#cursor'>cursor</a>
<a href='#cursor'>pointer</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='curve_top' href='#curve'>curve</a>
<a href='#curve'>plot</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='curvedarrow_top' href='#curvedarrow'>curvedarrow</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='curvedarrow2_top' href='#curvedarrow2'>curvedarrow2</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='curvedarrows_top' href='#curvedarrows'>curvedarrows</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='curvedarrows2_top' href='#curvedarrows2'>curvedarrows2</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='dashed_top' href='#dashed'>dashed</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='dashtype_top' href='#dashtype'>dashtype</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='diamondfill_top' href='#diamondfill'>diamondfill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='dotfill_top' href='#dotfill'>dotfill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='drag_top' href='#drag'>drag</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ellipse_top' href='#ellipse'>ellipse</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ellipses_top' href='#ellipses'>ellipses</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fillall_top' href='#fillall'>fillall</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='filled_top' href='#filled'>filled</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fillcolor_top' href='#fillcolor'>fillcolor</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fillpattern_top' href='#fillpattern'>fillpattern</a>
<a href='#fillpattern'>settileimage_url</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='filltoborder_top' href='#filltoborder'>filltoborder</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='floodfill_top' href='#floodfill'>floodfill</a>
<a href='#floodfill'>fill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fontcolor_top' href='#fontcolor'>fontcolor</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fontfamily_top' href='#fontfamily'>fontfamily</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='fontsize_top' href='#fontsize'>fontsize</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='functionlabel_top' href='#functionlabel'>functionlabel</a>
<a href='#functionlabel'>functionlabels</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='grid_top' href='#grid'>grid</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='gridfill_top' href='#gridfill'>gridfill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='group_top' href='#group'>group</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='demiline_top' href='#demiline'>demiline</a>
<a href='#demiline'>halfline</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='demilines_top' href='#demilines'>demilines</a>
<a href='#demilines'>halflines</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='hatchfill_top' href='#hatchfill'>hatchfill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='hline_top' href='#hline'>hline</a>
<a href='#hline'>horizontalline</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='hlines_top' href='#hlines'>hlines</a>
<a href='#hlines'>horizontallines</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='http_top' href='#http'>http</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='html_top' href='#html'>html</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='imagefill_top' href='#imagefill'>imagefill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='imagepalette_top' href='#imagepalette'>imagepalette</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='input_top' href='#input'>input</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='intooltip_top' href='#intooltip'>intooltip</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='jscurve_top' href='#jscurve'>jscurve</a>
<a href='#jscurve'>jsplot</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='jsmath_top' href='#jsmath'>jsmath</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='kill_top' href='#kill'>kill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='killaffine_top' href='#killaffine'>killaffine</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='killlinear_top' href='#killlinear'>killlinear</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='killrotate_top' href='#killrotate'>killrotate</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='killslider_top' href='#killslider'>killslider</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='killtranslation_top' href='#killtranslation'>killtranslation</a>
<a href='#killtranslation'>killtranslate</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='latex_top' href='#latex'>latex</a>
<a href='#latex'>math</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='lattice_top' href='#lattice'>lattice</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='linear_top' href='#linear'>linear</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='line_top' href='#line'>line</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='lines_top' href='#lines'>lines</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='linewidth_top' href='#linewidth'>linewidth</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='levelcurve_top' href='#levelcurve'>levelcurve</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='legend_top' href='#legend'>legend</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='legendcolors_top' href='#legendcolors'>legendcolors</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='linegraph_top' href='#linegraph'>linegraph</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='mathml_top' href='#mathml'>mathml</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='mouse_top' href='#mouse'>mouse</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='mouse_degree_top' href='#mouse_degree'>mouse_degree</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='display_top' href='#display'>display</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='precision_top' href='#precision'>precision</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='mousex_top' href='#mousex'>mousex</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='mousey_top' href='#mousey'>mousey</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multidash_top' href='#multidash'>multidash</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multidraw_top' href='#multidraw'>multidraw</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multilabel_top' href='#multilabel'>multilabel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multilinewidth_top' href='#multilinewidth'>multilinewidth</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multifill_top' href='#multifill'>multifill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multifillcolors_top' href='#multifillcolors'>multifillcolors</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multifillopacity_top' href='#multifillopacity'>multifillopacity</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multisnaptogrid_top' href='#multisnaptogrid'>multisnaptogrid</a>
<a href='#multisnaptogrid'>multisnap</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multistrokecolors_top' href='#multistrokecolors'>multistrokecolors</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multistrokeopacity_top' href='#multistrokeopacity'>multistrokeopacity</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='multiuserinput_top' href='#multiuserinput'>multiuserinput</a>
<a href='#multiuserinput'>multiinput</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='noreset_top' href='#noreset'>noreset</a>
<a href='#noreset'>killreset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='noxaxis_top' href='#noxaxis'>noxaxis</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='noyaxis_top' href='#noyaxis'>noyaxis</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='numberline_top' href='#numberline'>numberline</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='obabel_top' href='#obabel'>obabel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='opacity_top' href='#opacity'>opacity</a>
<a href='#opacity'>transparent</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='onclick_top' href='#onclick'>onclick</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='parallel_top' href='#parallel'>parallel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='plotsteps_top' href='#plotsteps'>plotsteps</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='point_top' href='#point'>point</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='points_top' href='#points'>points</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='poly_top' href='#poly'>poly</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='polyline_top' href='#polyline'>polyline</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='popup_top' href='#popup'>popup</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='protractor_top' href='#protractor'>protractor</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='pixels_top' href='#pixels'>pixels</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='pixelsize_top' href='#pixelsize'>pixelsize</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='piechart_top' href='#piechart'>piechart</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='range_top' href='#range'>range</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='rays_top' href='#rays'>rays</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='rect_top' href='#rect'>rect</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='rects_top' href='#rects'>rects</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='replyformat_top' href='#replyformat'>replyformat</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='roundrect_top' href='#roundrect'>roundrect</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='roundrects_top' href='#roundrects'>roundrects</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ruler_top' href='#ruler'>ruler</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='reset_top' href='#reset'>reset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='resetoffset_top' href='#resetoffset'>resetoffset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='rotate_top' href='#rotate'>rotate</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='rotationcenter_top' href='#rotationcenter'>rotationcenter</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='size_top' href='#size'>size</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='segment_top' href='#segment'>segment</a>
<a href='#segment'>seg</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='segments_top' href='#segments'>segments</a>
<a href='#segments'>segs</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='setlimits_top' href='#setlimits'>setlimits</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='setpixel_top' href='#setpixel'>setpixel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='slider_top' href='#slider'>slider</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='sgraph_top' href='#sgraph'>sgraph</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='snaptofunction_top' href='#snaptofunction'>snaptofunction</a>
<a href='#snaptofunction'>snaptofun</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='snaptopoints_top' href='#snaptopoints'>snaptopoints</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='snaptogrid_top' href='#snaptogrid'>snaptogrid</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='square_top' href='#square'>square</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='status_top' href='#status'>status</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='string_top' href='#string'>string</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='stringup_top' href='#stringup'>stringup</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='highlight_top' href='#highlight'>highlight</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='strokecolor_top' href='#strokecolor'>strokecolor</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='text_top' href='#text'>text</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='textarea_top' href='#textarea'>textarea</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='textfill_top' href='#textfill'>textfill</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='textup_top' href='#textup'>textup</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='trace_jscurve_top' href='#trace_jscurve'>trace_jscurve</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='trange_top' href='#trange'>trange</a>
<a href='#trange'>ranget</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='translation_top' href='#translation'>translation</a>
<a href='#translation'>translate</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='triangle_top' href='#triangle'>triangle</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='triangles_top' href='#triangles'>triangles</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userboxplot_top' href='#userboxplot'>userboxplot</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userboxplotdata_top' href='#userboxplotdata'>userboxplotdata</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userdraw_top' href='#userdraw'>userdraw</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userinput_top' href='#userinput'>userinput</a>
<a href='#userinput'>userinput_function</a>
<a href='#userinput'>userinput_xy</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userinput_xy_top' href='#userinput_xy'>userinput_xy</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='userinput_function_top' href='#userinput_function'>userinput_function</a>
<a href='#userinput_function'>userinput</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='vline_top' href='#vline'>vline</a>
<a href='#vline'>verticalline</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='vlines_top' href='#vlines'>vlines</a>
<a href='#vlines'>verticallines</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='video_top' href='#video'>video</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xaxis_top' href='#xaxis'>xaxis</a>
<a href='#xaxis'>xaxistext</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xaxisup_top' href='#xaxisup'>xaxisup</a>
<a href='#xaxisup'>xaxistextup</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xerrorbars_top' href='#xerrorbars'>xerrorbars</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='newrange_top' href='#newrange'>newrange</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xrange_top' href='#xrange'>xrange</a>
<a href='#xrange'>rangex</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xsnaptogrid_top' href='#xsnaptogrid'>xsnaptogrid</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xoffset_top' href='#xoffset'>xoffset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xyoffset_top' href='#xyoffset'>xyoffset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xunit_top' href='#xunit'>xunit</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xlabel_top' href='#xlabel'>xlabel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xlogbase_top' href='#xlogbase'>xlogbase</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xlogscale_top' href='#xlogscale'>xlogscale</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='xylogscale_top' href='#xylogscale'>xylogscale</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='yaxis_top' href='#yaxis'>yaxis</a>
<a href='#yaxis'>yaxistext</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='yerrorbars_top' href='#yerrorbars'>yerrorbars</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='yoffset_top' href='#yoffset'>yoffset</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='yrange_top' href='#yrange'>yrange</a>
<a href='#yrange'>rangey</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ysnaptogrid_top' href='#ysnaptogrid'>ysnaptogrid</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ylabel_top' href='#ylabel'>ylabel</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ylogbase_top' href='#ylogbase'>ylogbase</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='ylogscale_top' href='#ylogscale'>ylogscale</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='yunit_top' href='#yunit'>yunit</a>
</div></li>
<li class='card cell'><div class='card-section'>
<a id='zoom_top' href='#zoom'>zoom</a>
</div></li>
</ul>

<h3 id='canvasdraw'>canvasdraw <a href='#canvasdraw_top' title='return at the command list'>&#8593;</a></h3>
        <code>  canvasdraw</code>
        <ul>
<li> Canvasdraw will try use the same basic syntax structure as flydraw
</li>
<li> General syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">opacity [0-255],[0,255]</a></li><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>please note: dashing may have different spacing depending on the angle of the line<br>see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw</li><li>a fillable object can be set fillable by starting the object command with an <span class="wims_emph">f</span> (like <span class="wims_emph">frect</span>,<span class="wims_emph">fcircle</span>,<span class="wims_emph">ftriangle</span> ...) or by using the keyword <a href="#filled">filled</a> before the object command.<br>The fill colour of <span class="wims_emph">non_userdraw</span> 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>note: do not use a <b>f</b> with this non-solid pattern filling !<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 <span class="wims_emph">precision</span> 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 <span class="wims_emph">onclick object</span> can be set <span class="wims_emph">clickable</span> by the preceding keyword <a href="#onclick">onclick</a><br>not all flydraw objects can be set clickable</li><li><b>remarks using a <span class="wims_emph">;</span> as command separator</b>. Commands with only numeric or colour arguments may be using a <span class="wims_emph">;</span> as command separator (instead of a new line). Commands with a string argument may not use a <span class="wims_emph">;</span> 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 <span class="wims_emph">family</span> may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>almost every command for a single object has a multiple objects counterpart:<br><ul>general syntax rule:<li><code>object x1,y1,...,color</code></li><li><code>objects color,x1,y1,...</code></li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#css">css some_css</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> <br>command <code>fontfamily</code> is <b>not</b> active for these elements</li></ul>
</li>
<li> If needed multiple interactive scripts (*) may be used in a single webpage.<br>A function <code>read_canvas()</code> and / or <code>read_dragdrop()</code> can read all interactive userdata from these images.<br>The global array <code>canvas_scripts</code>will contain all unique random "canvas_root_id" of the included scripts.<br>The included local javascript "read" functions <span class="wims_emph">read_canvas%d()</span> and <span class="wims_emph">read_dragdrop%d()</span> will have this <span class="wims_emph">%d = canvas_root_id</span><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><code>fun = eval("read_canvas"+canvas_scripts[0])</code> 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><code>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 + "newline";<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;};<br>&nbsp;if( found_result ){return draw_reply;}else{return null;};<br>};</code> <br>(*) Note: the speed advantage over <em>canvas-do-it-all</em> libraries is reduced to zero, when multiple canvasdraw scripts are present in a single page...<br>For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB<br>In these cases it would be much faster to load a static general HTML5 canvas javascript draw library and parse it multiple raw fly instructions !<br>
</li>
<li> Canvasdraw can be used 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 <span class="wims_emph">canvas-do-it-all</span> libraries, who have proven to be not suitable for low-end computers found in schools...)
</li>
<li> You can check the javascript reply format in the wims tool <a href="http://localhost/wims/wims.cgi?lang=en&module=tool/directexec">direct exec</a>
</li>
<li> For usage within OEF (without anstype <span class="wims_emph">draw</span>), something like this (a popup function plotter) will work:<br><code>	ext{popup_grapher=wims(exec canvasdraw <br>popup<br>size 400,400<br>xrange -10,10<br>yrange -10,10<br>axis<br>axisnumbering<br>opacity 100,100<br>grid 2,2,grey,2,2,6,black<br>snaptogrid<br>linewidth 2<br>jsplot red,5*sin(1/x)<br>strokecolor green<br>functionlabel f(x)=<br>userinput function<br>mouse blue,22<br>)<br>}<br>\statement{<br>\popup_grapher<br>}</code>.
</li>
<li> Be aware that older browsers will probably not work correctly<br>no effort has been undertaken to add glue code for older browsers !! <br>in any case it is not wise to use older browsers...not just for canvasdraw.
</li>
<li> Be aware that combining several different objects and interactivity may lead to problems.
</li>
<li> 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.
</li>
<li> There is limited support for touch devices: touchstart, touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#multidraw">multidraw primitives </a>, <a href="#protractor">protractor</a>, <a href="#ruler">ruler</a> and probably a few others... <br>Only single finger gestures are supported (for now).<br>The use of a special pen is advised for interactive drawing on touch devices.<br>For more accurate user-interaction (numeric, eg keyboard driven drawings) with canvasdraw on touch devices: use the command family <a href="#userinput_xy">userinput</a>.
</li>
</ul>
<h3 id='affine'>affine <a href='#affine_top' title='return at the command list'>&#8593;</a></h3>
        <code>  affine a,b,c,d,tx,ty</code>
        <ul>
<li> defines a transformation matrix for subsequent objects
</li>
<li> use keyword <a href='#killaffine'>killaffine</a> to end the transformation...the next objects will be drawn in the original x/y-range
</li>
<li> a: Scales the drawings horizontally
</li>
<li> b: Skews the drawings horizontally
</li>
<li> c: Skews the drawings vertically
</li>
<li> d: Scales the drawings vertically
</li>
<li> tx: Moves the drawings horizontally in xrange coordinate system
</li>
<li> ty: Moves the drawings vertically in yrange coordinate system
</li>
<li> the data precision may be set by preceding command <span class="wims_emph">precision int</span>
</li>
<li> <b>note</b>: not all affine operations on canvasdraw objects will be identical to flydraw's behaviour. Make sure to check !
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,affine $wims_name_Example: affine
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,affine+latex $wims_name_Example: affine+latex
      
</li>
</ul>
<h3 id='duplicates'>duplicates <a href='#duplicates_top' title='return at the command list'>&#8593;</a></h3>
        <code>  duplicates || allowdups</code>
        <ul>
<li> keyword (no arguments)
</li>
<li> only useful in case of a <a href="#multidraw">multidraw</a> student reply.
</li>
<li> only useful in default <a href="#replyformat">replyformat</a> (eg in case of a not specified replyformat).
</li>
<li> if set, duplicate (x:y) coordinates will not be removed from the student reply.
</li>
<li> technical: a javascript variable "allow_duplicate_answer = 1;" is declared.
</li>
<li> default for command multidraw is: removal of duplicates.
</li>
</ul>
<h3 id='angle'>angle <a href='#angle_top' title='return at the command list'>&#8593;</a></h3>
        <code>  angle xc,yc,width,start_angle,end_angle,color</code>
        <ul>
<li> width is in x-range
</li>
<li> angles are in degrees
</li>
<li> not compatible with <span class="wims_emph">flydraw</span>
</li>
<li> will zoom in/out
</li>
<li> may be set onclick or drag&amp;drop
</li>
<li> if angle size is controlled by command <a href='#slider'>slider</a>, use radians to set limits of slider
</li>
<li> <span class="wims_emph">angle</span> and <a href="#arc">arc</a> are exceptions in case of sliders...they are always active (e.g. not click-activated)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,angle $wims_name_Example: angle
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,angle_slider $wims_name_Example: angle_slider
      
</li>
</ul>
<h3 id='animate'>animate <a href='#animate_top' title='return at the command list'>&#8593;</a></h3>
        <code>  animate</code>
        <ul>
<li> keyword
</li>
<li> if set, it will animate a point on a curve
</li>
<li> all other canvas object or group of objects (like lines,circles,rects,points...images,svg,latex,mathml etc)<br>may be animated using command <a href='#slider'>slider</a> with keyword 'anim'
</li>
<li> the animated point is a filled rectangle ; adjust colour with command <code>fillcolor colorname/hexnumber</code>
</li>
<li> use linewidth to adjust size of the points
</li>
<li> will animate a point on -only- the next <a href='#jsplot'>jsplot/jscurve command</a>. Only a single call to <code>animate</code> is allowed...in case of multiple <code>animate</code> keywords, only the last one is valid
</li>
<li> only usable in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric)
</li>
<li> moves repeatedly from <a href='#xrange'>xmin to xmax</a> or in case of a parametric function from <a href='#trange'>tmin to tmax</a>
</li>
<li> use commands <a href='#multilinewidth'>multilinewidth</a>, <a href='#multistrokecolor'>multistrokecolor</a> etc in case of multiple animated functions.<br>use multiple functions as argument in a single call to <a href='#jsplot'>jsplot color,fun1,fun2,fun3...fun_n</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,animate_1 $wims_name_Example: animate_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,animate_2 $wims_name_Example: animate_2
      
</li>
</ul>
<h3 id='arc'>arc <a href='#arc_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arc xc,yc,x-width,y-height,start_angle,end_angle,color</code>
        <ul>
<li> may be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li> compatible with <span class="wims_emph">flydraw</span>
</li>
<li> attention: width &amp; height in x/y-range
</li>
<li> for arrow hats on an arc, see command <a href='#arcarrow'>arcarrow or arrowarc</a>
</li>
<li> better use command <a href='#angle'>angle</a> for use with a <a href='#slider'>slider</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arc $wims_name_Example: arc
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arc_filled $wims_name_Example: arc_filled
      
</li>
</ul>
<h3 id='arrowarc'>arrowarc <a href='#arrowarc_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrowarc xc,yc,x-width,y-height,start_angle,end_angle,color,type</code>
        <ul>
<li><span>alternative command: <a id='arcarrow' href='#arcarrow_top'><code>arcarrow</code></a></span></li>
<li> uses same syntax as <a href='#arc'>arc</a>
</li>
<li> for arrow hat: type = 1 : right<br>type = 2 : left<br>type = 3 : left&amp;right
</li>
<li> if the default arrow hat/head is not satisfactory , the size of the arrow may be set with command <a href='#arrowhead'>arrowhead</a>
</li>
<li> no other arrow types are implemented...yet
</li>
<li> may be set draggable or onclick
</li>
<li> attention: when width ad height are very different, the arrow hat is not drawn correctly. This is a flaw and not a feature...(for now: too much calculations to correct)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arcarrow $wims_name_Example: arcarrow
      
</li>
</ul>
<h3 id='arrow'>arrow <a href='#arrow_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrow x1,y1,x2,y2,h,color</code>
        <ul>
<li><span>alternative command: <a id='vector' href='#vector_top'><code>vector</code></a></span></li>
<li> draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color <span class="wims_emph">color</span>
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrow_drag $wims_name_Example: arrow_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrow_click $wims_name_Example: arrow_click
      
</li>
</ul>
<h3 id='arrows'>arrows <a href='#arrows_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrows color,head (px),x1,y1,x2,y2...x_n,y_n</code>
        <ul>
<li><span>alternative command: <a id='vectors' href='#vectors_top'><code>vectors</code></a></span></li>
<li> draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrows_click $wims_name_Example: arrows_click
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrows_drag $wims_name_Example: arrows_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrows_drag_slider $wims_name_Example: arrows_drag_slider
      
</li>
</ul>
<h3 id='arrow2'>arrow2 <a href='#arrow2_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrow2 x1,y1,x2,y2,h,color</code>
        <ul>
<li> draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color <span class="wims_emph">color</span>
</li>
<li> use command <code>arrowhead int</code> to adjust the arrow head size
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrow2 $wims_name_Example: arrow2
      
</li>
</ul>
<h3 id='arrows2'>arrows2 <a href='#arrows2_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n</code>
        <ul>
<li> draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color <span class="wims_emph">color</span>
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrows
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,arrows2 $wims_name_Example: arrows2
      
</li>
</ul>
<h3 id='arrowhead'>arrowhead <a href='#arrowhead_top' title='return at the command list'>&#8593;</a></h3>
        <code>  arrowhead int</code>
        <ul>
<li> default 8 (pixels)
</li>
</ul>
<h3 id='audio'>audio <a href='#audio_top' title='return at the command list'>&#8593;</a></h3>
        <code>  audio x,y,w,h,loop,visible,audiofile location</code>
        <ul>
<li> x,y: left top corner of audio element (in xrange / yrange)
</li>
<li> w,y: width and height in pixels
</li>
<li> loop: 0 or 1 ( 1 = loop audio fragment)
</li>
<li> visible: 0 or 1 (1 = show controls)
</li>
<li> audio format may be in *.mp3 or *.ogg
</li>
<li> If you are using *.mp3: be aware that FireFox will not (never) play this ! (Pattented format)
</li>
<li> if you are using *.ogg: be aware that Microsoft based systems not support it natively
</li>
<li> To avoid problems supply both types (mp3 and ogg) of audiofiles.<br>the program will use both as source tag
</li>
</ul>
<h3 id='axisnumbering'>axisnumbering <a href='#axisnumbering_top' title='return at the command list'>&#8593;</a></h3>
        <code>  axisnumbering</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> 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>
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<h3 id='axis'>axis <a href='#axis_top' title='return at the command list'>&#8593;</a></h3>
        <code>  axis</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<h3 id='barchart'>barchart <a href='#barchart_top' title='return at the command list'>&#8593;</a></h3>
        <code>  barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n</code>
        <ul>
<li> may <b>only</b> to be used together with command <a href='#grid'>grid</a>
</li>
<li> 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>
<li> use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner
</li>
<li> multiple barchart command may be used in a single script
</li>
<li> also see command <a href='#piechart'>piechart</a>
</li>
<li> note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,barchart $wims_name_Example: barchart
      
</li>
</ul>
<h3 id='bezier'>bezier <a href='#bezier_top' title='return at the command list'>&#8593;</a></h3>
        <code>  bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end</code>
        <ul>
<li> draw a bezier curve between points, starting from (x_start:y_start)
</li>
<li> can <b>not</b> be dragged or set onclick
</li>
</ul>
<h3 id='bgcolor'>bgcolor <a href='#bgcolor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  bgcolor colorname or #hex</code>
        <ul>
<li> use this color as background of the "div" containing the canvas(es)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,bgcolor $wims_name_Example: bgcolor
      
</li>
</ul>
<h3 id='bgimage'>bgimage <a href='#bgimage_top' title='return at the command list'>&#8593;</a></h3>
        <code>  bgimage image_location</code>
        <ul>
<li> use an image as background; technical: we use the background of <span class="wims_emph">canvas_div</span>
</li>
<li> the background image will be resized to match "width = xsize" and "height = ysize"
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,bgimage $wims_name_Example: bgimage
      
</li>
</ul>
<h3 id='blink'>blink <a href='#blink_top' title='return at the command list'>&#8593;</a></h3>
        <code>  blink time(seconds)</code>
        <ul>
<li> NOT IMPLEMETED -YET
</li>
</ul>
<h3 id='boxplot'>boxplot <a href='#boxplot_top' title='return at the command list'>&#8593;</a></h3>
        <code>  boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max</code>
        <ul>
<li> example:<br><code>xrange 0,300<br>yrange 0,10<br>boxplot x,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8
</li>
<li> example:<br><code>xrange 0,10<br>yrange 0,300<br>boxplot y,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8
</li>
<li> 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>
<li> use command <a href='#fillpattern'>fillpattern some_pattern</a> to use a (diamond for Q1, hatch for Q3) pattern.
</li>
<li> use command <a href='#opacity'>opacity</a> to adjust fill_opacity of stroke and fill colours
</li>
<li> use command <a href='#legend'>legend</a> to automatically create a legend <br>unicode allowed in legend<br>use command <a href='#fontfamily'>fontfamily</a> to set the font of the legend.
</li>
<li> there is no limit to the number of boxplots used.
</li>
<li> can <b>not</b> be set draggable and <a href='#onclick'>onclick</a> is not ready yet
</li>
<li> use keyword <a href="#userboxplot">userboxplot</a> before command boxplot, if a pupil must draw a boxplot (using his own min,Q1,median,Q3,max data)
</li>
<li> use keyword <a href="#userboxplotdata">userboxplotdata</a> before command boxplot, if a pupil must generate the data by some means.
</li>
<li> use command <a href="#boxplotdata">boxplotdata</a> when the boxplot should be drawn from wims-generated raw statistical date
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,boxplot_1 $wims_name_Example: boxplot_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,boxplot_2 $wims_name_Example: boxplot_2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,boxplot_3 $wims_name_Example: boxplot_3
      
</li>
</ul>
<h3 id='boxplotdata'>boxplotdata <a href='#boxplotdata_top' title='return at the command list'>&#8593;</a></h3>
        <code>  boxplotdata some_data</code>
        <ul>
<li> 'some_data' are a list of numbers separated by a comma "," (items)
</li>
<li> only be used before command <code>boxplot</code>: the command <a href="#boxplot">boxplot</a> will provide the boxplot drawing of the data.
</li>
<li> 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>
<li> note: wims will not check your data input | format. use js-error console to debug any problems.
</li>
<li> a javascript function <code>statistics()</code> will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function.
</li>
<li> only a single call to <code>boxplotdata</code> can be made. If multiple boxplots should be present in a single canvas, then use multiple calls to command <a href='#boxplot'>boxplot</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,boxplotdata $wims_name_Example: boxplotdata
      
</li>
</ul>
<h3 id='canvastype'>canvastype <a href='#canvastype_top' title='return at the command list'>&#8593;</a></h3>
        <code>  canvastype TYPE</code>
        <ul>
<li> for now only useful before commands filltoborder / floodfill / clickfill etc operations<br>Only the images of this TYPE will be scanned and filled
</li>
<li> default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas)
</li>
<li> use another TYPE, if you know what you are doing...
</li>
<li> other possible canvasses (e.g. transparent PNG pictures, xsize &times; 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>
</li>
</ul>
<h3 id='centered'>centered <a href='#centered_top' title='return at the command list'>&#8593;</a></h3>
        <code>  centered</code>
        <ul>
<li> keyword ; to place the text centered (in width and height) on the text coordinates(x:y)
</li>
<li> may be used for text exactly centered on its (x;y)
</li>
<li> use <a href="#fontfamily">fontfamily</a> for setting the font
</li>
<li> may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the <span class="wims_emph">drag/drop/onclick-library</span>)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,centered $wims_name_Example: centered
      
</li>
</ul>
<h3 id='centerstring'>centerstring <a href='#centerstring_top' title='return at the command list'>&#8593;</a></h3>
        <code>  centerstring color,y-value,the text string</code>
        <ul>
<li> title color,y-value,the text string
</li>
<li> draw a string centered on the canvas at y = y-value
</li>
<li> can not be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span> (...)
</li>
<li> unicode supported: <code>centerstring red,5,\u2232</code>
</li>
<li> use a command like <code>fontfamily italic 24pt Arial</code> to set fonts on browser that support font change
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,centerstring $wims_name_Example: centerstring
      
</li>
</ul>
<h3 id='circle'>circle <a href='#circle_top' title='return at the command list'>&#8593;</a></h3>
        <code>  circle xc,yc,width (2*r in pixels),color</code>
        <ul>
<li> use command <code>fcircle xc,yc,d,color</code>
</li>
<li><span>alternative command: <a id='disk' href='#disk_top'><code>disk</code></a></span></li>
<li> use command <code>fillcolor color</code> to set the fillcolor
</li>
<li> may be set <a href='#drag'>draggable</a> / <a href='#onclick'>onclick</a>
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,circle $wims_name_Example: circle
      
</li>
</ul>
<h3 id='circles'>circles <a href='#circles_top' title='return at the command list'>&#8593;</a></h3>
        <code>  circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n</code>
        <ul>
<li> <b>attention</b> r = radius in x-range (!)
</li>
<li> use keyword <code>filled</code> or command <code>fcircles</code> to produce solid circles
</li>
<li><span>alternative command: <a id='disks' href='#disks_top'><code>disks</code></a></span></li>
<li> use command <code>fillcolor color</code> to set the fillcolor
</li>
<li> may be set <a href='#drag'>draggable</a> / <a href='#onclick'>onclick</a> (individually)
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,circles_drag $wims_name_Example: circles_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,circles_onclick $wims_name_Example: circles_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,circles_drag_slider $wims_name_Example: circles_drag_slider
      
</li>
</ul>
<h3 id='clearbutton'>clearbutton <a href='#clearbutton_top' title='return at the command list'>&#8593;</a></h3>
        <code>  clearbutton value</code>
        <ul>
<li><span>alternative command: <a id='delete' href='#delete_top'><code>delete</code></a></span></li>
<li><span>alternative command: <a id='erase' href='#erase_top'><code>erase</code></a></span></li>
<li> adds a button to clear the <a href="#userdraw">userdraw</a> canvas with text <span class="wims_emph">value</span>
</li>
<li> <b>attention</b> command <code>clearbutton</code> is incompatible with <a href="#multidraw">multidraw</a> based drawings<br/>(in <code>multidraw</code> there is always a remove_object_button for every draw primitive)
</li>
<li> 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
</li>
<li> uses the tooltip placeholder div element: may not be used with command <code>intooltip</code>
</li>
<li> use command <a href="#css">css</a> to style the button...
</li>
<li> the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script<br>to change the style of all <span class="wims_emph">clearbutton</span> of all included canvasdraw scripts, use something like<br><code>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;</code> or <code>document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); &minus;&minus;&gt;<br>&nbsp;&nbsp;p++;<br>&nbsp;};<br>};</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clearbutton $wims_name_Example: clearbutton
      
</li>
</ul>
<h3 id='clock'>clock <a href='#clock_top' title='return at the command list'>&#8593;</a></h3>
        <code>  clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]</code>
        <ul>
<li> use command <code>opacity stroke-opacity,fill-opacity</code> to adjust foreground (stroke) and background (fill) transparency
</li>
<li> type hourglass:<br>type = 0: only segments<br>type = 1: only numbers<br>type = 2: numbers and segments
</li>
<li> 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
</li>
<li> if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
</li>
<li> 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>
</li>
<li> canvasdraw will not check validity of colornames...the javascript console is your best friend
</li>
<li> no combinations with other reply_types allowed, for now
</li>
<li> if interactive is set to <span class="wims_emph">1</span>, 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
</li>
<li> note: if you need multiple -interactive- clocks on a webpage, use multiple <span class="wims_emph">clock</span> commands in a single script !<br>and <i>not multiple canvas scripts</i> in a single page
</li>
<li> note: clocks will not zoom or pan, when using command <a href='#zoom'>zoom</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_1 $wims_name_Example: clock_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_2 $wims_name_Example: clock_2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_3 $wims_name_Example: clock_3
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_4 $wims_name_Example: clock_4
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_5 $wims_name_Example: clock_5
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_6 $wims_name_Example: clock_6
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,clock_7 $wims_name_Example: clock_7
      
</li>
</ul>
<h3 id='colorpalette'>colorpalette <a href='#colorpalette_top' title='return at the command list'>&#8593;</a></h3>
        <code>  colorpalette color_name_1,color_name_2,...,color_name_8</code>
        <ul>
<li> opacity will be the same for all colors and is set by command <a href="#opacity">opacity [0-255],[0-255]</a>
</li>
<li> 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
</li>
<li> make sure to include the <span class="wims_emph">remove button</span> by using command <a href='#clearbutton'>clearbutton some_text</a>
</li>
</ul>
<h3 id='copy'>copy <a href='#copy_top' title='return at the command list'>&#8593;</a></h3>
        <code>  copy x,y,x1,y1,x2,y2,[filename URL]</code>
        <ul>
<li> The image may be "bitmap" or "SVG"
</li>
<li> Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
</li>
<li> If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
</li>
<li> [filename] is the URL of the image
</li>
<li> <em>TODO:move special image functions to generic 'dragstuff' library</em>
</li>
<li> URL is normal URL of network reachable image file location
</li>
<li> if command <a href="#drag">drag x/y/xy</a> is set before command <span class="wims_emph">copy</span>, 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 <span class="wims_emph">snaptogrid</span>, <span class="wims_emph">xsnaptogrid</span>, <span class="wims_emph">ysnaptogrid</span> or <code>snaptopoints x1,y1,x2,y2...</code>.
</li>
<li> if keyword <a href="#onclick">onclick</a> is set before command <span class="wims_emph">copy</span> 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 <span class="wims_emph">drag x|y|xy</span> (use javascript read_canvas to get the new coordinates
</li>
<li> <span class="wims_emph">onclick</span> for external images may be mixed with canvas generated stuff (like lines,curves, embeded XML etc)
</li>
<li> you may draw / userdraw / drag other stuff on top of an "imported" image
</li>
<li> the use of a slider is not possible: if needed, use command <a href='#html'>html x,y,&lt;img src=my_image.svg /&gt; </a>
</li>
<li> use keyword <a href='#centered'>centered</a> before command <span class="wims_emph">copy</span> to place image center at given coordinates.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,copy_onclick $wims_name_Example: copy_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,copy_drag_xy $wims_name_Example: copy_drag_xy
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,copy_drag_xy_snaptogrid $wims_name_Example: copy_drag_xy_snaptogrid
      
</li>
</ul>
<h3 id='copyresized'>copyresized <a href='#copyresized_top' title='return at the command list'>&#8593;</a></h3>
        <code>  copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url</code>
        <ul>
<li> The image may be any "bitmap" or "SVG"
</li>
<li> 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
</li>
<li> (dx1:dy1) must be left top corner; (dx2:dy2) must be right bottom corner of inserted image
</li>
<li> If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
</li>
<li> 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 !!)
</li>
<li> if command <a href="#drag">drag x/y/xy</a> is set before command <span class="wims_emph">copy</span>, 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 <span class="wims_emph">snaptogrid</span>,<span class="wims_emph">xsnaptogrid</span>,<span class="wims_emph">ysnaptogrid</span> or <code>snaptopoints x1,y1,x2,y2...</code>
</li>
<li> if keyword <a href="#onclick">onclick</a> is set before command <span class="wims_emph">copy</span> the image(s) is clickable (marked with a green rectangle around the image)<br>use <span class="wims_emph">read_dragdrop</span> 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 <span class="wims_emph">drag x|y|xy</span> (use javascript read_canvas to get the new coordinates
</li>
<li> <span class="wims_emph">onclick</span> for external images may be mixed with canvas generated stuff (like lines,curves etc)
</li>
<li> you may draw / userdraw / drag stuff on top of an "imported" image
</li>
<li> when set draggable, there will be special function 'read_canvas_images()'<br>now dragging external images may be combined with 'read_canvas()' from <a href='#userdraw'>userdraw</a> or <a href='#multidraw'>multidraw</a><br>set command <a href='#precision'>precision</a> before command <span class="wims_emph">copy</span>
</li>
<li> use keyword <a href='#centered'>centered</a> before command 'copyresized' to place image center at given coordinates.
</li>
<li> <em>TODO:move special image functions to generic 'dragstuff' library</em>
</li>
</ul>
<h3 id='crosshair'>crosshair <a href='#crosshair_top' title='return at the command list'>&#8593;</a></h3>
        <code>  crosshair x,y,color</code>
        <ul>
<li> draw a single crosshair point at (x;y) in color <span class="wims_emph">color</span>
</li>
<li> use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,crosshair $wims_name_Example: crosshair
      
</li>
</ul>
<h3 id='crosshairs'>crosshairs <a href='#crosshairs_top' title='return at the command list'>&#8593;</a></h3>
        <code>  crosshairs color,x1,y1,x2,y2,...,x_n,y_n</code>
        <ul>
<li> draw multiple crosshair points at given coordinates in color <span class="wims_emph">color</span>
</li>
<li> use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,crosshairs_1 $wims_name_Example: crosshairs_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,crosshairs_2 $wims_name_Example: crosshairs_2
      
</li>
</ul>
<h3 id='crosshairsize'>crosshairsize <a href='#crosshairsize_top' title='return at the command list'>&#8593;</a></h3>
        <code>  crosshairsize int</code>
        <ul>
<li> default 8 (px)
</li>
</ul>
<h3 id='css'>css <a href='#css_top' title='return at the command list'>&#8593;</a></h3>
        <code>  css css_class</code>
        <ul>
<li> may be used before any <span class="wims_emph">style-able</span> html object (like inputfields or buttons) or some html objects that are generated by some canvasdraw commands
</li>
<li> in case of <a href="#multidraw">multidraw</a> this command must be a table css class, for example "wimstable"
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,css $wims_name_Example: css
      
</li>
</ul>
<h3 id='cursor'>cursor <a href='#cursor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  cursor some CSS cursor_style</code>
        <ul>
<li><span>alternative command: <a id='pointer' href='#pointer_top'><code>pointer</code></a></span></li>
<li> style can be any valid CSS property value
</li>
<li> choose from these types:<br>alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,<br>ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,<br>nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,<br>sw-resize,text,url(myBall.cur),auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial
</li>
<li> note: wims will not check the validity of your cursor declaration
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,cursor_css $wims_name_Example: cursor_css
      
</li>
</ul>
<h3 id='curve'>curve <a href='#curve_top' title='return at the command list'>&#8593;</a></h3>
        <code>  curve color,formula(x)</code>
        <ul>
<li><span>alternative command: <a id='plot' href='#plot_top'><code>plot</code></a></span></li>
<li> use command <a href="#trange">trange</a> in parametric functions before <b>every</b> command curve / plot <code>trange -pi,pi<br>curve color,formula1(t),formula2(t)</code><br>A next parametric curve will only be correctly plot when trange is set again !<br/>this is a design flaw and not a feature...
</li>
<li> use command <a href="#precision">precision</a> to increase the number of digits of the plotted points
</li>
<li> use command <a href="#plotsteps">plotsteps</a> to increase / decrease the amount of plotted points (default 150)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> if you need a plot beyond xrange / yrange, use <a href="#jsplot">jsplot</a> (command <span class="wims_emph">curve</span> will only calculate points within the xrange)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curve $wims_name_Example: curve
      
</li>
</ul>
<h3 id='curvedarrow'>curvedarrow <a href='#curvedarrow_top' title='return at the command list'>&#8593;</a></h3>
        <code>  curvedarrow x1,y1,xc,yc,x2,y2,color</code>
        <ul>
<li> draw a single headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc)
</li>
<li> use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrow_drag $wims_name_Example: curvedarrow_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrow_click $wims_name_Example: curvedarrow_click
      
</li>
</ul>
<h3 id='curvedarrow2'>curvedarrow2 <a href='#curvedarrow2_top' title='return at the command list'>&#8593;</a></h3>
        <code>  curvedarrow2 x1,y1,xc,yc,x2,y2,color</code>
        <ul>
<li> draw a double headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc)
</li>
<li> use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrow_drag $wims_name_Example: curvedarrow_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrow_click $wims_name_Example: curvedarrow_click
      
</li>
</ul>
<h3 id='curvedarrows'>curvedarrows <a href='#curvedarrows_top' title='return at the command list'>&#8593;</a></h3>
        <code>  curvedarrows color,x1,y1,xc,yc,x2,y2,...,x_(n-1),y_(n-1),xc,yc,x_n,y_n</code>
        <ul>
<li> draw curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc<br> note: the curve will <b>not go through</b> point (xc:yc)
</li>
<li> use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrows_drag $wims_name_Example: curvedarrows_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrows_click $wims_name_Example: curvedarrows_click
      
</li>
</ul>
<h3 id='curvedarrows2'>curvedarrows2 <a href='#curvedarrows2_top' title='return at the command list'>&#8593;</a></h3>
        <code>  curvedarrows2 color,x1,y1,xc,yc,x2,y2,...x_(n-1),y_(n-1),xc,yc,x_n,y_n</code>
        <ul>
<li> draw double headed curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc. <br> note: the curve will <b>not go through</b> point (xc:yc)
</li>
<li> use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
</li>
<li> use command <code>linewidth int</code> to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrows2_drag $wims_name_Example: curvedarrows2_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,curvedarrows2_click $wims_name_Example: curvedarrows2_click
      
</li>
</ul>
<h3 id='dashed'>dashed <a href='#dashed_top' title='return at the command list'>&#8593;</a></h3>
        <code>  dashed</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> next object will be drawn with a dashed line
</li>
<li> change dashing scheme by using command <a href="#dashtype">dashtype</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,dashed $wims_name_Example: dashed
      
</li>
</ul>
<h3 id='dashtype'>dashtype <a href='#dashtype_top' title='return at the command list'>&#8593;</a></h3>
        <code>  dashtype line_width_px,space_width_px</code>
        <ul>
<li> every indiviual object may have its own dashtype, if needed...
</li>
<li> When keyword <a href='#dashed'>dashed</a> is set, the objects will be drawn with this dashtype
</li>
<li> default value <code>dashtype 2,2</code> e.g. 2px line and 2px space
</li>
<li> HTML5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,dashtype $wims_name_Example: dashtype
      
</li>
</ul>
<h3 id='diamondfill'>diamondfill <a href='#diamondfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  diamondfill x0,y0,dx,dy,color</code>
        <ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> there is also a command <a href="#userdraw">userdraw diamondfill,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,diamondfill $wims_name_Example: diamondfill
      
</li>
</ul>
<h3 id='dotfill'>dotfill <a href='#dotfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  dotfill x0,y0,dx,dy,color</code>
        <ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> radius of dots is linewidth
</li>
<li> there is also a command <a href="#userdraw">userdraw dotfill,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,dotfill $wims_name_Example: dotfill
      
</li>
</ul>
<h3 id='drag'>drag <a href='#drag_top' title='return at the command list'>&#8593;</a></h3>
        <code>  drag [x][y][xy]</code>
        <ul>
<li> the next object will be draggable in x / y / xy direction
</li>
<li> the displacement can be read by <code>javascript:read_dragdrop();</code>
</li>
<li> 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>
<li> <a href='#onclick'>onclick</a> and <span class="wims_emph">drag x|y|xy</span> may be combined (for different objects: a single object can either be onclick or drag, not both )
</li>
<li> <span class="wims_emph">multi_objects</span> will be numbered in the given x/y-sequence (example: points red,0,0,1,1,2,2,3,3: point (0:0) is object_number 1)
</li>
<li> <b>attention</b>: static objects and <span class="wims_emph">onclick/drag</span> objects of the same type (like point,circle,etc) with the same coordinates (e.g. objects that overlap) will give problems in the <span class="wims_emph">recognition algorithm</span>) in this example<br> <code>linewidth 4<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>the red point will not be recognised as draggable ! in the example<br><code>linewidth 4<br>drag xy<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>both points will be recognised
</li>
<li> the answer is: drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew<br>wherein object_number is the sequence number of the draggable &amp; onclick objects in your script.<br>Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc)
</li>
<li> use keyword <a href='#snaptogrid'>snaptogrid</a>, <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a> or command <a href='#snaptopoints'>snaptopoints x1,y1,x2,y2,...</a> to switch from free to discrete movement
</li>
<li> 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.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,drag_x $wims_name_Example: drag_x
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,drag_y $wims_name_Example: drag_y
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,drag_xy $wims_name_Example: drag_xy
      
</li>
</ul>
<h3 id='ellipse'>ellipse <a href='#ellipse_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ellipse xc,yc,width_x,height_y,color</code>
        <ul>
<li> ellipses with center xc/yc and width/height in x/y-range etc (this differs from flydraw syntax!)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ellipse $wims_name_Example: ellipse
      
</li>
</ul>
<h3 id='ellipses'>ellipses <a href='#ellipses_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ellipses color,xc1,yc1,width_x1,height_y1,xc2,yc2,width_x2,height_y2,xc3,yc3,width_x3,height_y3,...</code>
        <ul>
<li> ellipses with center and height in x/y-range etc (this differs from flydraw syntax!)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ellipses $wims_name_Example: ellipses
      
</li>
</ul>
<h3 id='fillall'>fillall <a href='#fillall_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fillall color,x1,y1,x2,y2...x_n,y_n</code>
        <ul>
<li> fill all region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
</li>
<li> any other colors (objects) in the <a href="#canvastype">canvastype</a> will act as border to the bucket fill
</li>
<li> use this command after all boundary objects are declared.
</li>
<li> Use command 'userdraw clickfill,color' for user click driven flood fill.
</li>
<li> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
</li>
<li> note: the fill-family of commands are very (client) cpu intensive operations!<br>filling is done pixel by pixel 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..
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,fillall $wims_name_Example: fillall
      
</li>
</ul>
<h3 id='filled'>filled <a href='#filled_top' title='return at the command list'>&#8593;</a></h3>
        <code>  filled</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> the next <span class="wims_emph">fillable</span> object (only the next !) will be filled
</li>
<li> use command <a href="#fillcolor">fillcolor color</a> to set fillcolor
</li>
<li> use <a href="#fillpattern">fillpattern</a> for non-solid color filling.
</li>
<li> use command <code>opacity 0-255,0-255</code> to set stroke and fill-opacity
</li>
<li> use command <a href='#fill'>fill x,y,color</a> or <a href="#floodfill">floodfill x,y,color</a> to fill the space around (x;y) with color <br>pixel operation implemented in javascript: use with care !
</li>
</ul>
<h3 id='fillcolor'>fillcolor <a href='#fillcolor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fillcolor colorname or #hex</code>
        <ul>
<li> set the color: mainly used for command 'userdraw obj,stroke_color'
</li>
<li> all fillable massive objects will have a fillcolor == strokecolor (just to be compatible with flydraw...)
</li>
<li> see <a href="#fillpattern">fillpattern</a> for non-solid color filling.
</li>
</ul>
<h3 id='fillpattern'>fillpattern <a href='#fillpattern_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fillpattern grid | hatch | diamond | dot | image_url</code>
        <ul>
<li><span>alternative command: <a id='settileimage_url' href='#settileimage_url_top'><code>settileimage_url</code></a></span></li>
<li> use a pattern as fillstyle
</li>
<li> suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a>
</li>
<li> note: do not use the <span class="wims_emph">f</span> for a fillable object : this is used exclusively for solid colour filling.
</li>
<li> the fillcolor is set by the object command, for example:<br><code>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</code>
</li>
<li> the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
</li>
<li> the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
</li>
<li> see <a href="#fillcolor">fillcolor</a> for solid color filling.
</li>
<li> when using an image-url, make sure it contains an <span class="wims_emph">/</span> in the filename...<span class="wims_emph">fillpattern &#36;module_dir/gifs/test.jpg</span> will fill the next fillable object with this image.|<br>the argument to html5 canvas routine 'createPattern(img,argument)' is set to <span class="wims_emph">repeat</span> 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><code>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</code>
</li>
<li> fillpattern is also active for <a href="#userdraw">userdraw object,color</a>...<br>the userdraw family a has also <span class="wims_emph">clickfill type</span> (e.g. an object gets filled between boundaries, when clicked) commands like:<br>'userdraw dotfill,color'<br>'userdraw hatchfill,color' etc
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,fillpattern_1 $wims_name_Example: fillpattern_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,fillpattern_2 $wims_name_Example: fillpattern_2
      
</li>
</ul>
<h3 id='filltoborder'>filltoborder <a href='#filltoborder_top' title='return at the command list'>&#8593;</a></h3>
        <code>  filltoborder x,y,bordercolor,color</code>
        <ul>
<li> fill the region of point (x:y) with color 'color'
</li>
<li> any other color will not act as border to the bucket fill
</li>
<li> use this command after all boundary objects are declared.
</li>
<li> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
</li>
<li> note: filltoborder is a very (client) cpu intensive operation!<br>filling is done pixel by pixel 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..
</li>
<li> maybe used together with command <a href="#userdraw">userdraw clickfill,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,filltoborder $wims_name_Example: filltoborder
      
</li>
</ul>
<h3 id='floodfill'>floodfill <a href='#floodfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  floodfill x,y,color</code>
        <ul>
<li><span>alternative command: <a id='fill' href='#fill_top'><code>fill</code></a></span></li>
<li> fill the region of point (x:y) with color 'color'
</li>
<li> any other color or size of picture (borders of picture) will act as border to the bucket fill
</li>
<li> use this command after all boundary objects are declared.
</li>
<li> Use command <code>userdraw clickfill,color</code> for user click driven flood fill.
</li>
<li> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
</li>
<li> note: floodfill is a very (client) cpu intensive operation!<br>filling is done pixel by pixel 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..
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,floodfill $wims_name_Example: floodfill
      
</li>
</ul>
<h3 id='fontcolor'>fontcolor <a href='#fontcolor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fontcolor color</code>
        <ul>
<li> color: hexcolor or colorname
</li>
<li> default: black
</li>
<li> use command <a href="#fontfamily">fontfamily</a> to deviate from default font type
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,fontcolor $wims_name_Example: fontcolor
      
</li>
</ul>
<h3 id='fontfamily'>fontfamily <a href='#fontfamily_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fontfamily font_description</code>
        <ul>
<li> set the font family; for browsers that support it
</li>
<li> font_description: Arial, Courier, Helvetica etc
</li>
<li> in case commands <code>string color,x,y,the string</code>, <code>stringup color,x,y,rotation,the string</code>, <span class="wims_emph">fontfamily</span> can be something like:<code>fontfamily italic 34pt Arial</code>. Use correct syntax: <span class="wims_emph">font style</span>, <span class="wims_emph">font size pt</span>, <span class="wims_emph">fontfamily</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,fontfamily $wims_name_Example: fontfamily
      
</li>
</ul>
<h3 id='fontsize'>fontsize <a href='#fontsize_top' title='return at the command list'>&#8593;</a></h3>
        <code>  fontsize font_size</code>
        <ul>
<li> default value 12
</li>
<li> note: for some macros (like <span class="wims_emph">grid | legend | xaxistext | xlabel</span> 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
</li>
</ul>
<h3 id='functionlabel'>functionlabel <a href='#functionlabel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  functionlabel label_1:label_2:label_3...</code>
        <ul>
<li><span>alternative command: <a id='functionlabels' href='#functionlabels_top'><code>functionlabels</code></a></span></li>
<li> default value <span class="wims_emph">f(x)=:g(x)=:h(x)=:i(x)=:j(x)=:k(x)=:m(x)=:n(x)=</span>
</li>
<li> no mathml allowed (just ascii string)
</li>
<li> use command <a href='#fontsize'>fontsize int</a> to adjust the size
</li>
<li> use command <a href='#strokecolor'>strokecolor colorname</a> to adjust the labels (individually, if needed)
</li>
<li> if needed, use before every command <a href='#userinput'>userinput function | inputfield | textarea</a>
</li>
<li> no limit in amount of inputfields for userbased function plotting
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,function_label $wims_name_Example: function_label
      
</li>
</ul>
<h3 id='grid'>grid <a href='#grid_top' title='return at the command list'>&#8593;</a></h3>
        <code>  grid step_x,step_y,gridcolor</code>
        <ul>
<li> if keywords <a href="#axis">axis</a> or <a href="#axisnumbering">axisnumbering</a> are set, use: <code>grid step_x,step_y,major_color,minor_x,minor_y,tics height in px,axis_color</code> minor x step = step_x / minor_x
</li>
<li> 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; defaults: black,12,Arial
</li>
<li> if xmin > 0 and/or ymin > 0 and zooming / panning is not active: be aware that the x/y-axis numbering and x/y major/minor tic marks will not be visual as they are placed under the x-axis and left to the y-axis (in Quadrant II and IV)
</li>
<li> can <b>not</b> be set <a href="#onclick">onclick</a> or <a href="#drag">drag xy</a>
</li>
<li> use commands <a href="#xlabel">xlabel some_string</a> and/or <a href="#ylabel">ylabel some_string</a> to label axis; use command <span class="wims_emph">fontsize</span> to adjust size: the font family is non-configurable 'italic your_fontsize px Arial' !
</li>
<li> see commands <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 command <a href="#fontfamily">fontfamily</a>; default '12px Arial')
</li>
<li> see command <a href="#legend">legend</a> to set a legend for the graph; use command <a href="#fontsize">fontsize</a> to adjust size (the font family is non-configurable 'bold your_fontsize px Arial')
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,grid $wims_name_Example: grid
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,grid_axis $wims_name_Example: grid_axis
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,grid_axis_axisnumbering $wims_name_Example: grid_axis_axisnumbering
      
</li>
</ul>
<h3 id='gridfill'>gridfill <a href='#gridfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  gridfill x0,y0,dx,dy,color</code>
        <ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> there is also a command <a href="#userdraw">userdraw gridfill,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,gridfill $wims_name_Example: gridfill
      
</li>
</ul>
<h3 id='group'>group <a href='#group_top' title='return at the command list'>&#8593;</a></h3>
        <code>  group</code>
        <ul>
<li> keyword
</li>
<li> work in 'progress'
</li>
<li> all objects(*) after the command and until <a href="#kill">kill group</a> or <a href="#killslider">killslider</a> may be moved together with mouse moverments<br> (*) for now all real canvas objects and latex / xml ; but no images (work in progress)
</li>
<li> may be combined with slider driven movements or drag & drop
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,group $wims_name_Example: group
      
</li>
</ul>
<h3 id='demiline'>demiline <a href='#demiline_top' title='return at the command list'>&#8593;</a></h3>
        <code>  demiline x1,y1,x2,y2,color</code>
        <ul>
<li><span>alternative command: <a id='halfline' href='#halfline_top'><code>halfline</code></a></span></li>
<li> draws a halfline starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,halfline $wims_name_Example: halfline
      
</li>
</ul>
<h3 id='demilines'>demilines <a href='#demilines_top' title='return at the command list'>&#8593;</a></h3>
        <code>  demilines color,x1,y1,x2,y2,....</code>
        <ul>
<li><span>alternative command: <a id='halflines' href='#halflines_top'><code>halflines</code></a></span></li>
<li> draws halflines starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex) etc
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> indiviually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,halflines $wims_name_Example: halflines
      
</li>
</ul>
<h3 id='hatchfill'>hatchfill <a href='#hatchfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  hatchfill x0,y0,dx,dy,color</code>
        <ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> there is also a command <a href="#userdraw">userdraw hatchfill,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,hatchfill $wims_name_Example: hatchfill
      
</li>
</ul>
<h3 id='hline'>hline <a href='#hline_top' title='return at the command list'>&#8593;</a></h3>
        <code>  hline x,y,color</code>
        <ul>
<li><span>alternative command: <a id='horizontalline' href='#horizontalline_top'><code>horizontalline</code></a></span></li>
<li> draw a horizontal line through point (x:y) in color 'color'
</li>
<li> or use command <a href='#curve'>curve color,formula</a> to draw the line (uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,hline $wims_name_Example: hline
      
</li>
</ul>
<h3 id='hlines'>hlines <a href='#hlines_top' title='return at the command list'>&#8593;</a></h3>
        <code>  hlines color,x1,y1,x2,y2,...</code>
        <ul>
<li><span>alternative command: <a id='horizontallines' href='#horizontallines_top'><code>horizontallines</code></a></span></li>
<li> draw horizontal lines through points (x1:y1)...(xn:yn) in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,hlines $wims_name_Example: hlines
      
</li>
</ul>
<h3 id='http'>http <a href='#http_top' title='return at the command list'>&#8593;</a></h3>
        <code>  http x1,y1,x2,y2,http://some_adress.com</code>
        <ul>
<li> an active html-page will be displayed in an "iframe" rectangle left top (x1:y1), right bottom (x2:y2)
</li>
<li> do not use interactivity (or mouse) if the mouse needs to be active in the iframe
</li>
<li> can <b>not</b> be <span class="wims_emph">set onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,http $wims_name_Example: http
      
</li>
</ul>
<h3 id='html'>html <a href='#html_top' title='return at the command list'>&#8593;</a></h3>
        <code>  html x1,y1,html_string</code>
        <ul>
<li> all tags are allowed, html code using inputfields could be read using your own javascript code. Do not use ids like 'canvas_input0' etc.
</li>
<li> can be set <a href='#onclick'>onclick</a> and <a href='#drag'>drag&amp;drop</a>
</li>
<li> command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
</li>
<li> command <a href='#rotate'>rotate</a> will rotate the object
</li>
<li> use keyword <a href='#centered'>centered</a> to center the html object on (x1:y1)
</li>
<li> note: using drag&amp;drop for all external P,SPAN,DIV,IMG,SVG-images onto a canvasdraw element, use <span class="wims_emph">onclick=javascript:place_image_on_canvas(this.id)</span>
</li>
<li> note: sub &amp; sup are supported in command family <a href='#string'>string</a>, e.g. real internal canvas objects !
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,html-text $wims_name_Example: html-text
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,html-image-slider $wims_name_Example: html-image-slider
      
</li>
</ul>
<h3 id='imagefill'>imagefill <a href='#imagefill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  imagefill x,y,scaling to xsize &times; ysize?,image_url</code>
        <ul>
<li> The next suitable <b>filled object</b> will be filled with "image_url" tiled
</li>
<li> scaling to xsize &times; ysize ? ... 1 = yes 0 = no
</li>
<li> After pattern filling, the fill-color should be reset !
</li>
<li> wims getins / image from class directory: imagefill 80,80,my_image.gif
</li>
<li> normal url: imagefill 80,80,0,&#36;module_dir/gifs/my_image.gif
</li>
<li> normal url: imagefill 80,80,1,http://adres/a/b/c/my_image.jpg
</li>
<li> if dx,dy is larger than the image, the whole image will be background to the next object.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,imagefill_tile $wims_name_Example: imagefill_tile
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,imagefill_scale $wims_name_Example: imagefill_scale
      
</li>
</ul>
<h3 id='imagepalette'>imagepalette <a href='#imagepalette_top' title='return at the command list'>&#8593;</a></h3>
        <code>  imagepalette image1,image2,image3,...</code>
        <ul>
<li> if used before and together with command <a href='#multidraw'>multidraw images,..,..., etc</a> the image will be presented in a small table in the <span class="wims_emph">control panel</span>.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,imagepalette $wims_name_Example: imagepalette
      
</li>
</ul>
<h3 id='input'>input <a href='#input_top' title='return at the command list'>&#8593;</a></h3>
        <code>  input x,y,size,editable,value</code>
        <ul>
<li> to set inputfield "readonly", use editable = 0
</li>
<li> if no preset 'value' is needed...use a 'space' as last item argument
</li>
<li> only active inputfields (editable = 1) will be read with read_canvas();
</li>
<li> if <span class="wims_emph">&#36;status=done</span> (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br>override this by keyword <a href="#status">status</a>
</li>
<li> may be further controlled by <a href="#css">css</a>
</li>
<li> if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();)
</li>
<li> 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)
</li>
<li> if the student must place an inputfield(s) somewhere on the canvas, use command <a href="#userdraw">userdraw input,color</a> or make use of a command like <a href="#userdraw">userdraw text,color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,input $wims_name_Example: input
      
</li>
</ul>
<h3 id='intooltip'>intooltip <a href='#intooltip_top' title='return at the command list'>&#8593;</a></h3>
        <code>  intooltip link_text</code>
        <ul>
<li> link_text is a single line (span-element)
</li>
<li> link_text may also be an image URL <span class="wims_emph">http://some_server/images/my_image.png</span> or <span class="wims_emph">&#36;module_dir/gifs/my_image.jpg</span>
</li>
<li> link_text may contain HTML markup
</li>
<li> the canvas will be displayed in a tooltip on <span class="wims_emph">link_text</span>
</li>
<li> the canvas is default transparent: use command <a href="#bgcolor">bgcolor color</a> to adjust background-color, the link text will also be shown with this 'bgcolor'.
</li>
<li> many <span class="wims_emph">userinput stuff</span> will use the tooltip_placeholder_div element...only one is defined in the wims-page<br>and are therefore these commands are mutually exclusive.<br>keep this in mind...
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,intooltip $wims_name_Example: intooltip
      
</li>
</ul>
<h3 id='jscurve'>jscurve <a href='#jscurve_top' title='return at the command list'>&#8593;</a></h3>
        <code>  jscurve color,formula1(x),formula2(x),formula3(x),...</code>
        <ul>
<li><span>alternative command: <a id='jsplot' href='#jsplot_top'><code>jsplot</code></a></span></li>
<li> your function will be plotted by the javascript engine of the client browser
</li>
<li> 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
</li>
<li> use only basic math in your curve: <code>sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e</code>
</li>
<li> use parenthesis and rawmath: use 2*x instead of 2x ; use 2^(sin(x))...etc etc (use error console to debug any errors...)
</li>
<li> <b>attention</b>: last <span class="wims_emph">precision</span> command in the canvasdraw script determines the calculation precision of the javascript curve plot !
</li>
<li> no validity check is done by wims.
</li>
<li> zooming & panning are implemented:<br>use command <span class="wims_emph">zoom color</span> for mouse driven zooming<br>or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
</li>
<li> 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
</li>
<li> zooming & panning in case of userbased functionplot: reclick the OK button to re-plot curve onto the resized grid
</li>
<li> use keyword <a href='animate'>animate</a> for animating a point on the curve
</li>
<li> use command <span class="wims_emph">trace_jscurve formula(x)</span> for tracing
</li>
<li> use command <span class="wims_emph">jsmath formula(x)</span> for calculating and displaying indiviual points on the curve
</li>
<li> can <b>not</b> be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (yet)
</li>
<li> commands plotjump / plotstep are not active for <span class="wims_emph">jscurve</span>
</li>
<li> every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
</li>
<li> plotting multiple js-curves on the same canvas (for example if you want to use 'userdraw clickfill,color' on <a href="#canvastype">canvastype</a> number 111, use:<br/> <code>jscurve red,fun1(x),fun2(x)...fun_n(x)</code>, you must specify individual multistrokecolors &amp; multistrokeopacity &amp; multilinewidth for these multiple js-curves to use different colors. Otherwise all curves will be the same color... Use commands like: <a href="#multistrokecolors">multistrokecolors</a>, <a href="#multilinewidth">multilinewidth</a>, <a href="#multidash">multidash</a>, <a href="#multistrokeopacity">multistroke</a>, <b>color</b> given for the command <code>jscurve color,formulas(x)</code> will not be used in that case... but the color argument must still be given in any case (otherwise syntax error...)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,jscurve $wims_name_Example: jscurve
      
</li>
</ul>
<h3 id='jsmath'>jsmath <a href='#jsmath_top' title='return at the command list'>&#8593;</a></h3>
        <code>  jsmath some_math_function</code>
        <ul>
<li> will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates.
</li>
<li> default labels <span class="wims_emph">x</span> and <span class="wims_emph">y</span>; the commands <span class="wims_emph">xlabel some_x_axis_name</span> and <span class="wims_emph">ylabel some_y_axis_name</span> will set the label for the input fields
</li>
<li> use command 'css some_css' for styling the display fields. Use command 'fontsize int' to size the labels <span class="wims_emph">x</span> and <span class="wims_emph">y</span>
</li>
<li> 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...
</li>
<li> be aware that the formula's of the plotted function(s) can be found in the page javascript source
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,jsmath $wims_name_Example: jsmath
      
</li>
</ul>
<h3 id='kill'>kill <a href='#kill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  kill arguments</code>
        <ul>
<li> arguments may be: affine linear translation rotation slider offset reset
</li>
<li> for documentation see: killaffine,killlinear,killtranslation...
</li>
<li> multiple arguments are allowed (although not checked for validity...)
</li>
</ul>
<h3 id='killaffine'>killaffine <a href='#killaffine_top' title='return at the command list'>&#8593;</a></h3>
        <code>  killaffine</code>
        <ul>
<li> keyword: resets the transformation matrix to 1,0,0,1,0,0
</li>
<li> note: any active linear transformation will also be reset: tx=0, ty=0
</li>
</ul>
<h3 id='killlinear'>killlinear <a href='#killlinear_top' title='return at the command list'>&#8593;</a></h3>
        <code>  killlinear</code>
        <ul>
<li> keyword: resets the transformation matrix to 1,0,0,1,tx,ty
</li>
<li> note:any active transformation or rotation will not be killed (tx,ty remain active)
</li>
</ul>
<h3 id='killrotate'>killrotate <a href='#killrotate_top' title='return at the command list'>&#8593;</a></h3>
        <code>  killrotate</code>
        <ul>
<li> will set the rotation angle to 0.
</li>
<li> will also reset the command <a href="#rotationcenter">rotationcenter</a> to the first (x;y) of the next rotatable/slidable object(s) <br/>eg a following rotate command will have the first object point as rotation center
</li>
<li> if not set, the rotation center will remain unchanged
</li>
<li> note:any active transformation or linear will not be killed (e.g an active transformation matrix remains active)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,killrotate $wims_name_Example: killrotate
      
</li>
</ul>
<h3 id='killslider'>killslider <a href='#killslider_top' title='return at the command list'>&#8593;</a></h3>
        <code>  killslider</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> ends grouping of object under a previously defined slider
</li>
</ul>
<h3 id='killtranslation'>killtranslation <a href='#killtranslation_top' title='return at the command list'>&#8593;</a></h3>
        <code>  killtranslation</code>
        <ul>
<li><span>alternative command: <a id='killtranslate' href='#killtranslate_top'><code>killtranslate</code></a></span></li>
<li> note: a active linear or affine transformation will not be 100% reset...only tx=0,ty=0
</li>
<li> resets the translation matrix a,b,c,d,tx,ty to a,b,c,d,0,0
</li>
</ul>
<h3 id='latex'>latex <a href='#latex_top' title='return at the command list'>&#8593;</a></h3>
        <code>  latex x,y,tex string</code>
        <ul>
<li><span>alternative command: <a id='math' href='#math_top'><code>math</code></a></span></li>
<li> note: <b>for a single greek letter</b> ,please be smart and use a command like <a href='#string'>string</a> along with <b>unicode</b> !! <br>possibly together with command <a href="#xyoffset">xoffset, yoffset or xyoffset</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a>
</li>
<li> you may also use command <a href="#mathml">mathml</a> for xml strings generated with wims commmand <span class="wims_emph">mathmlmath</span> (will not work on KaTeX enabled WIMS)
</li>
<li> transformation commands <a href='#affine'>affine</a>, <a href='#translation'>translation</a> and <a href='#rotate'>rotate</a> are supported.(onclick and drag will work)
</li>
<li> can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
</li>
<li> can be set draggable:<code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates...
</li>
<li> can be moved/rotated with command <a href='#slider'>slider</a>
</li>
<li> snaptogrid is supported
</li>
<li> when clicked, the colour of the 'div background' of the 'mathobject' will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings
</li>
<li> userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
</li>
<li> userdraw may be combined; the read_canvas() will contain the drawing.
</li>
<li> draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> and all objects from commands <a href='#html'>html</a> or <a href='#obabel'>obabel</a> can be combined with drag and/or onclick mathml
</li>
<li> other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
</li>
<li> 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 <code>javascript:read_mathml();</code>. <b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
</li>
<li> If other inputfields (command input / command textarea) or userdraw are performed, the function read_canvas() will not read mathml. Use some generic function to read it....
</li>
<li> use keyword <a href='#centered'>centered</a> to center the katex div object on (x1:y1) <br>this may not work as expected for MathJaX [TO BE TESTED]
</li>
<li> note: if you want to include external TeX via drag&amp;drop onto a canvasdraw element, use \mmlid{integer} in the tex-command:<span class="wims_emph">!insmath \mmlid{1}rac{1}{pi}</span><br> (if your wims_mathml does not support it...use <a href="http://85.148.206.56/wims/download/Mathml.tar.gz">this version...</a>)
</li>
<li> note: the same is true for all external P,SPAN,DIV,IMG,SVG-images via drag&amp;drop onto a canvasdraw element, use <span class="wims_emph">onclick=javascript:place_image_on_canvas(this.id)</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,latex_drag $wims_name_Example: latex_drag
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,latex $wims_name_Example: latex
      
</li>
</ul>
<h3 id='lattice'>lattice <a href='#lattice_top' title='return at the command list'>&#8593;</a></h3>
        <code>  lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color</code>
        <ul>
<li> can <b>not</b> be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,lattice $wims_name_Example: lattice
      
</li>
</ul>
<h3 id='linear'>linear <a href='#linear_top' title='return at the command list'>&#8593;</a></h3>
        <code>  linear a,b,c,d</code>
        <ul>
<li> defines a transformation matrix for subsequent objects
</li>
<li> use keyword <a href='#killlinear'>killlinear</a> to end the transformation...the next objects will be drawn in the original x/y-range
</li>
<li> a: Scales the drawings horizontally
</li>
<li> b: Skews the drawings horizontally
</li>
<li> c: Skews the drawings vertically
</li>
<li> d: Scales the drawings vertically
</li>
<li> the data precision may be set by preceding command <span class="wims_emph">precision int</span>
</li>
<li> note: any active translation (tx,ty) is not changed
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,linear $wims_name_Example: linear
      
</li>
</ul>
<h3 id='line'>line <a href='#line_top' title='return at the command list'>&#8593;</a></h3>
        <code>  line x1,y1,x2,y2,color</code>
        <ul>
<li> draw a line through points (x1:y1)--(x2:y2) in color <span class="wims_emph">color</span>
</li>
<li> or use command <span class="wims_emph">curve color,formula</span> to draw the line (uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,line $wims_name_Example: line
      
</li>
</ul>
<h3 id='lines'>lines <a href='#lines_top' title='return at the command list'>&#8593;</a></h3>
        <code>  lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n</code>
        <ul>
<li> draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color'
</li>
<li> or use multiple commands <span class="wims_emph">curve color,formula</span> or <span class="wims_emph">jscurve color,formule</span> to draw the line <br>(uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> <b>attention</b>: the flydraw command <span class="wims_emph">lines</span> is equivalent to canvasdraw command <a href="#polyline">polyline</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,lines $wims_name_Example: lines
      
</li>
</ul>
<h3 id='linewidth'>linewidth <a href='#linewidth_top' title='return at the command list'>&#8593;</a></h3>
        <code>  linewidth int</code>
        <ul>
<li> default 1
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,linewidth $wims_name_Example: linewidth
      
</li>
</ul>
<h3 id='levelcurve'>levelcurve <a href='#levelcurve_top' title='return at the command list'>&#8593;</a></h3>
        <code>  levelcurve color,expression in x/y,l1,l2,...</code>
        <ul>
<li> draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n
</li>
<li> the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br>(choose flydraw if you want quality...)
</li>
<li> 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>
<li> note: the arrays for holding the javascript data are limited in size
</li>
<li> note: reduce image size if javascript data arrays get overloaded<br>(command 'plotsteps int' will not control the data size of the plot...)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,levelcurve $wims_name_Example: levelcurve
      
</li>
</ul>
<h3 id='legend'>legend <a href='#legend_top' title='return at the command list'>&#8593;</a></h3>
        <code>  legend string1:string2:string3....string_n</code>
        <ul>
<li> will be used to create a legend for a graph
</li>
<li> also see command <a href='#piechart'>piechart</a>
</li>
<li> will use the same colors per default as used in the graphs; use command <a href='#legendcolors'>legendcolors</a> to override the default
</li>
<li> use command <a href="#fontsize">fontsize</a> to adjust. (command <span class="wims_emph">fontfamily</span> is not active for command <span class="wims_emph">legend</span>)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,legend $wims_name_Example: legend
      
</li>
</ul>
<h3 id='legendcolors'>legendcolors <a href='#legendcolors_top' title='return at the command list'>&#8593;</a></h3>
        <code>  legendcolors color1:color2:color3:...:color_n</code>
        <ul>
<li> will be used to color a legend: use this command after the legend command ! e.g. <code>legend test1:test2:test3<br>legendcolors blue:red:orange</code>.
</li>
<li> make sure the number of colors match the number of legend items
</li>
<li> command <span class="wims_emph">legend</span> in case of <span class="wims_emph">piechart</span> and <span class="wims_emph">barchart</span> will use these colours per default (no need to specify <span class="wims_emph">legendcolors</span>)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,legendcolors $wims_name_Example: legendcolors
      
</li>
</ul>
<h3 id='linegraph'>linegraph <a href='#linegraph_top' title='return at the command list'>&#8593;</a></h3>
        <code>  linegraph x1:y1:x2:y2...x_n:y_n</code>
        <ul>
<li> will plot your data in a graph
</li>
<li> may <b>only</b> to be used together with command <a href='#grid'>grid</a>
</li>
<li> 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>
<li> use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner
</li>
<li> also see command <a href='#piechart'>piechart</a>
</li>
<li> multiple linegraphs may be used in a single plot
</li>
<li> note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
</li>
<li> <ul><li>use command <a href='#strokecolor'>strokecolor</a> before a command <span class="wims_emph">linegraph</span> to set the color of this graph</li><li>use command <a href='#linewidth'>linewidth</a> before command <span class="wims_emph">linegraph</span> to set linewidth of this graph</li><li>use keyword <a href='#dashed'>dashed</a> before command <span class="wims_emph">linegraph</span> to set dashing of the graph</li><li>if dashing is set, use command <a href='#dashtype'>dashtype</a> before command <span class="wims_emph">linegraph</span> to set the type of dashing of the (individual) graph</li></ul>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,linegraph $wims_name_Example: linegraph
      
</li>
</ul>
<h3 id='mathml'>mathml <a href='#mathml_top' title='return at the command list'>&#8593;</a></h3>
        <code>  mathml x1,y1,mathml_string</code>
        <ul>
<li> this command is special for GECKO browsers, and it makes use of Native Mathml
</li>
<li> For general use with all browsers, use command <a href='#latex'>latex</a>
</li>
<li> can be set <a href='onclick'>onclick</a> and <a href='drag'>drag&amp;drop</a> <br>Note: dragging is fairly primitive dragging of the div-element, and is not done using the <em>dragstuff library</em>
</li>
<li> command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
</li>
<li> command <a href='#rotate'>rotate</a> will rotate the object
</li>
<li> the mathml object is centered at (x1:y1)
</li>
<li> the <span class="wims_emph">mathml_string</span> can be produced using WIMS commands like <span class="wims_emph">texmath</span> followed by <span class="wims_emph">mathmlmath</span>... or write correct TeX and use only <span class="wims_emph">mathmlmath</span>
</li>
<li> mathml will be displayed in a rectangle left top (x1:y1)
</li>
<li> can be set onclick <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects; if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
</li>
<li> can be set draggable: <code>javascript:read_dragdrop()</code> will return all coordinates in same order as the canvas script: unmoved objects will have their original coordinates...
</li>
<li> snaptogrid is supported...snaptopoints will work, but use with care... due to the primitive dragging. Technically: the dragstuff library is not used... the mathml is embedded in a new div element and not in the html5-canvas.
</li>
<li> when clicked, the mathml object will be drawn in red color; the div background color will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings.
</li>
<li> userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
</li>
<li> draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> can be combined with drag and/or onclick mathml
</li>
<li> other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
</li>
<li> 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();"
</li>
<li> 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....
</li>
<li> use keyword <a href='#centered'>centered</a> to center the mathml/xml object on (x1:y1)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,mathml_onclick $wims_name_Example: mathml_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,mathml_drag $wims_name_Example: mathml_drag
      
</li>
</ul>
<h3 id='mouse'>mouse <a href='#mouse_top' title='return at the command list'>&#8593;</a></h3>
        <code>  mouse color,fontsize</code>
        <ul>
<li> will display the cursor (x:y) coordinates in <span class="wims_emph">color</span> and <span class="wims_emph">fontsize</span> using default fontfamily Arial
</li>
<li> note: use command <span class="wims_emph">mouse</span> at the end of your script code (the same is true for command <span class="wims_emph">zoom</span>)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,mouse $wims_name_Example: mouse
      
</li>
</ul>
<h3 id='mouse_degree'>mouse_degree <a href='#mouse_degree_top' title='return at the command list'>&#8593;</a></h3>
        <code>  mouse_degree color,fontsize</code>
        <ul>
<li> 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 Arial
</li>
<li> The angle is positive in QI and QIII and the angle value is negative in QII and QIV
</li>
<li> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,mouse_degree $wims_name_Example: mouse_degree
      
</li>
</ul>
<h3 id='display'>display <a href='#display_top' title='return at the command list'>&#8593;</a></h3>
        <code>  display TYPE,color,fontsize</code>
        <ul>
<li> TYPE may be x | y | xy | degree | radian | radius
</li>
<li> will display the mouse cursor coordinates as x-only,y-only,(x:y), the radius of a circle (this only in case 'userdraw circle(s),color') or the angle in degrees or radians for commands <code>userdraw arc,color</code> or protractor, ruler (if set dynamic).
</li>
<li> use commands <span class="wims_emph">xunit</span> and / or <span class="wims_emph">yunit</span> to add the units to the mouse values. The <span class="wims_emph">degree | radian</span> will always have the appropriate symbol).
</li>
<li> just like commands <span class="wims_emph">mouse</span>, <span class="wims_emph">mousex</span>, <span class="wims_emph">mousey</span>, <span class="wims_emph">mouse_degree</span>... only other name
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_x $wims_name_Example: display_x
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_y $wims_name_Example: display_y
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_xy $wims_name_Example: display_xy
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_deg $wims_name_Example: display_deg
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_rad $wims_name_Example: display_rad
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,display_radius $wims_name_Example: display_radius
      
</li>
</ul>
<h3 id='precision'>precision <a href='#precision_top' title='return at the command list'>&#8593;</a></h3>
        <code>  precision int</code>
        <ul>
<li> 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
</li>
<li> may be used / changed before every object
</li>
<li> In case of user interaction (like <span class="wims_emph">userdraw</span> or <span class="wims_emph">multidraw</span>), this value will be used to determine the amount of decimals in the reply / answer
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,precision $wims_name_Example: precision
      
</li>
</ul>
<h3 id='mousex'>mousex <a href='#mousex_top' title='return at the command list'>&#8593;</a></h3>
        <code>  mousex color,fontsize</code>
        <ul>
<li> will display the cursor x-coordinate in <span class="wims_emph">color</span> and <span class="wims_emph">font size</span> using the fontfamily Arial.
</li>
<li> note: use command <span class="wims_emph">mouse</span> at the end of your script code (the same is true for command <span class="wims_emph">zoom</span>).
</li>
</ul>
<h3 id='mousey'>mousey <a href='#mousey_top' title='return at the command list'>&#8593;</a></h3>
        <code>  mousey color,fontsize</code>
        <ul>
<li> will display the cursor y-coordinate in <span class="wims_emph">color</span> and <span class="wims_emph">font size</span> using default fontfamily Arial.
</li>
<li> note: use command <span class="wims_emph">mouse</span> at the end of your script code (the same is true for command <span class="wims_emph">zoom</span>).
</li>
</ul>
<h3 id='multidash'>multidash <a href='#multidash_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multidash 0,1,1</code>
        <ul>
<li> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, are dashed
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all objects will be set <span class="wims_emph">not dashed</span>... unless a generic keyword <span class="wims_emph">dashed</span> was given before command <span class="wims_emph">multidraw</span>
</li>
<li> the dash-type is not -yet- adjustable <br>(e.g. command <code>dashtype line_px,space_px</code> will give no control over multidraw objects)
</li>
<li> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multidraw'>multidraw <a href='#multidraw_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multidraw obj_type_1,obj_type_2...obj_type_11</code>
        <ul>
<li> for simple single object user drawings you could also use command <a href="#userdraw">userdraw</a>
</li>
<li> implemented obj_types:<ul><li>point | points</li><li>circle | circles</li><li>line | lines</li><li>segment | segments</li><li>arrow | arrows (use command 'arrowhead int' for size (default value 8 pixels))</li><li>curvedarrow | curvedarrows</li><li>rect | rects</li><li>closedpoly<br><b>only one</b> closedpolygon may be drawn.The number of <span class="wims_emph">corner points</span> is not preset (e.g. not limited, freestyle), the polygon 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><li>images</li><li>crosshair | crosshairs</li><li>function <br/>for more function user input fields, use it multiple times<br>for 4 inputfields use : multidraw function,function,function,function</li></ul>
</li>
<li> additionally objects may be user labelled, using obj_type <span class="wims_emph">text</span>...<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 <span class="wims_emph">fontfamily</span> and <span class="wims_emph">fontcolor</span> to adjust (command <span class="wims_emph">multistrokeopacity</span> 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>
<li> it makes no sense using something like <span class="wims_emph">multidraw point,points</span> ... <br>something like "multidraw polys4,polys7" will only result in drawing a <span class="wims_emph">4 point polygone</span> and not a <span class="wims_emph">7 point polygone</span>: this is a design flaw and not a feature...
</li>
<li> note: mouselisteners are only active if "&#36;status != done " (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword "status" (no arguments required)
</li>
<li> buttons for changing the obj_type (and in case of <span class="wims_emph">multiuserinput</span>, some inputfields and buttons) <br>will be present in the reserved div <span class="wims_emph">tooltip_div</span> and can be styled using command 'css some_css'
</li>
<li> the button label will be default the <span class="wims_emph">object primitive name</span> (like <span class="wims_emph">point</span>, <span class="wims_emph">circles</span>).<br>If you want a different label (e.g. an other language), use command <span class="wims_emph">multilabel</span><br>for example in dutch: <br><code>multilabel cirkel,lijnstuk,punten,STOP<br>multidraw circle,segment,points</code><br>(see command <a href='#multilabel'>multilabel</a> for more details)
</li>
<li> a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed
</li>
<li> multidraw is incompatible with command <span class="wims_emph">tooltip</span> (the reserved div_area is used for the multidraw control buttons)
</li>
<li> all <span class="wims_emph">multidraw</span> drawings will scale on zooming.<br>this in contrast to the command <a href="#userdraw">userdraw</a>.
</li>
<li> wims will <b>not</b> check the amount or validity of your command arguments ! <br>( use javascript console to debug any typo's )
</li>
<li> a local function <code>read_canvas%d</code> will read all userbased drawings.<br>The output is always a 16 lines string with fixed sequence.<br/>line 1 = points_x+";"+points_y+"
"<br/>line 2 = circles_x+";"+circles_y+";"+multi_radius+"
"<br/>line 3 = segments_x+";"+segments_y+"
"<br/>line 4 = arrows_x+";"+arrows_y+"
"<br/>line 5 = lines_x+";"+lines_y+"
"<br/>line 6 = triangles_x+";"+triangles_y+"
"<br/>line 7 = polys[3-9]_x+";"+polys[3-9]_y+"
"<br/>line 8 = rects_x +";"+rects_y+"
"<br>line 9 = closedpoly_x+";"+closedpoly_y+"
"<br/>line 10 = parallelogram_x+";"+parallelogram_y"
"<br/>line 11 = text_x+";"+text_y+";"+text"
"<br>line 12 = image_x+";"+image_y+";"+image_id<br>line 13 = curvedarrows_x +";"+ curvedarrows_y +"
"<br>line 14 = curvedarrows2_x +";"+ curvedarrows2_y +"
"<br>line 15 = crosshairs_x +";"+ crosshairs_y +"
"<br>line 16 = userdraw_x +";"+userdraw_y + "
" note: this is for single <span class="wims_emph">userdraw object,color</span> and <span class="wims_emph">replyformat 29</span><br/>line 17 = userdraw_x +";"+userdraw_y +";"+userdraw_radius + "
" note: this is for single <span class="wims_emph">userdraw object,color</span> and <span class="wims_emph">replyformat 29</span><br/>The x/y-data are in x/y-coordinate system and display precision may be set by a previous command <span class="wims_emph">precision 0 | 10 | 100 | 1000...</span><br>In case of circles the radius is -for the time being- rounded to pixels<br><b>use the wims "direct exec" tool to see the format of the reply</b>
</li>
<li> It is best to prepare / format the student reply in clientside javascript.<br>However in <span class="wims_emph">wims</span> language you could use something like this<br>for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br>note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25<br>rep = !line 7 of reply <br>rep = !translate ';' to '
' in &#36;rep <br>pts = 5 # 5 points for polygon <br>x_rep = !line 1 of &#36;rep <br>y_rep = !line 2 of &#36;rep <br>tot = !itemcnt &#36;x_rep <br>num_poly = &#36;[&#36;tot/&#36;pts] <br>idx = 0 <br>!for p=1 to &#36;num_poly <br>&nbsp;!for s=1 to &#36;pts <br>&nbsp;&nbsp;!increase idx <br>&nbsp;&nbsp;X = !item &#36;idx of &#36;x_rep <br>&nbsp;&nbsp;Y = !item &#36;idx of &#36;y_rep <br>&nbsp;&nbsp;# do some checking <br>&nbsp;!next s <br>!next p <br>
</li>
<li> <b>attention</b>: for command argument <span class="wims_emph">closedpoly</span>, only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.
</li>
<li> technical: all 10 <span class="wims_emph">draw primitives</span> + <span class="wims_emph">text</span> 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), this in contrast too many very slow do-it-all HTML5 canvas javascript libraries.<br>The mouselisteners are attached to the canvas-div element.
</li>
<li> a special object type is <span class="wims_emph">images</span>.<br>if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for <span class="wims_emph">images</span>) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (&lt;img&gt; tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br><code>&lt;img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /&gt;<br>&lt;img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /&gt;</code><br>etc ... when activating the multidraw <span class="wims_emph">image</span> button, the images can be selected<br> (left mouse button/onclick) and placed on the canvas...left mouse click.<br>using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas.
</li>
<li> When you are not content with the default <span class="wims_emph">multidraw control panel</span>, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and <span class="wims_emph">stop drawing</span> in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br>The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br/>point = 0<br>points =1<br>circle = 2<br>circles = 3<br>line = 4<br>lines = 5<br>segment = 6<br>segments = 7<br>arrow = 8<br>arrows = 9<br>triangle = 10<br>triangles = 11<br>closedspoly = 12<br>text = 13<br>rect = 14<br>rects = 15<br>poly[3-9] = 16<br>polys[3-9] = 17<br>parallelogram = 18<br>parallelograms = 19<br>images = 20<br>curvedarrow = 21<br>curvedarrows = 22<br>curvedarrow2 = 23<br>curvedarrows2 = 24<br>crosshair = 25<br>crosshairs = 26 <br>controls for example:<br><code>&lt;input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /&gt;<br>&lt;input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /&gt; <br>&lt;input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /&gt; </code><br/> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br>note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br>And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button"
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,multidraw_function $wims_name_Example: multidraw_function
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,multidraw $wims_name_Example: multidraw
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,multidraw_images $wims_name_Example: multidraw_images
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,multidraw_demo $wims_name_Example: multidraw_demo
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,multidraw_NOCONTROLS $wims_name_Example: multidraw_NOCONTROLS
      
</li>
</ul>
<h3 id='multilabel'>multilabel <a href='#multilabel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'</code>
        <ul>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> 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'...)
</li>
<li> the <span class="wims_emph">stop drawing</span> button text <b>must</b> be the last item on the <span class="wims_emph">multilabel</span> -list <br>for example:<br><code>multilabel punten,lijnen,Stop met Tekenen<br>multidraw points,lines</code>
</li>
<li> all buttons can be <span class="wims_emph">styled</span> by using command <code>css</code><br><b>note:</b>If you want to add some CSS style to the buttons...<br>the id's of the <span class="wims_emph">draw buttons</span> are their english command argument<br>(e.g. id="canvasdraw_points" for the draw points button).<br>the id of the <span class="wims_emph">stop drawing</span> button is "canvasdraw_stop_drawing".<br>the id of the "OK" button is <span class="wims_emph">canvasdraw_ok_button</span>
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
<li> if you don't want the controls, and want to write your own interface, set <code>multilabel NOCONTROLS</code>
</li>
</ul>
<h3 id='multilinewidth'>multilinewidth <a href='#multilinewidth_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multilinewidth linewidth_1,linewidth_2,...,linewidth_8</code>
        <ul>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all line widths will be set by a previous command <span class="wims_emph">linewidth int</span>
</li>
<li> use these up to 7 different line widths for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
</li>
<li> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multifill'>multifill <a href='#multifill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multifill 0,0,1,0,1,0,0</code>
        <ul>
<li> meaning draw objects no. 3 and 5, in the list of command <span class="wims_emph">multifill</span>, are filled (if the object is fillable...and not a line,segment,arrow or point...)
</li>
<li> using a fillpattern: multifill 0,1,2,5,3,4<br>meaning: first object is not filled...second object is solid color filled...2=grid | 3=hatch | 4=diamond | 5=dot
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all objects -except point|points- will be set <span class="wims_emph">not filled</span>... unless a command <code>filled</code> was given before command <code>multifill</code>
</li>
<li> only suitable for draw_primitives like <span class="wims_emph">circle | circles</span>, <span class="wims_emph">triangle | triangles</span>, <span class="wims_emph">rect | rects</span>, <span class="wims_emph">poly[3-9] | polys[3-9]</span> and <span class="wims_emph">polygon</span>
</li>
<li> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multifillcolors'>multifillcolors <a href='#multifillcolors_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multifillcolors color_name_1,color_name_2,...,color_name_8</code>
        <ul>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be <span class="wims_emph">stroke_color</span>, <span class="wims_emph">fill_opacity</span>
</li>
<li> use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_n</code>
</li>
<li> wims will <b>not</b> check if the number of colours matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
<li> 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>
</li>
</ul>
<h3 id='multifillopacity'>multifillopacity <a href='#multifillopacity_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8</code>
        <ul>
<li> float values 0 - 1 or integer values 0 - 255
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all fill opacity_ will be set by previous command <code>opacity int,int</code> and keyword <span class="wims_emph">filled</span>
</li>
<li> use these up to 7 different stroke opacities for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_y</code>
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multisnaptogrid'>multisnaptogrid <a href='#multisnaptogrid_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multisnaptogrid 0,1,1</code>
        <ul>
<li><span>alternative command: <a id='multisnap' href='#multisnap_top'><code>multisnap</code></a></span></li>
<li> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, will snap to the xy-grid (default 1 in x/y-coordinate system: see command <a href='#snaptogrid'>snaptogrid</a>)
</li>
<li> freehand drawing...specify precision for reply: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
</li>
<li> only the xy-values snap_to_grid: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
</li>
<li> only the x-values snap_to_grid: all objects snap to x-grid <code>multisnaptogrid 2,2,2,...</code>
</li>
<li> only the y-values snap_to_grid: all objects snap to y-grid <code>multisnaptogrid 3,3,3,...</code>
</li>
<li> if <a href='#snaptopoints'>snaptopoints</a> is defined: all objects snap to points <code>multisnaptogrid 4,4,4,...</code> <br><b>make sure to define the points to snap on...</b> use command <a href='#snaptopoints'>snaptopoints</a>
</li>
<li> <code>multisnaptogrid 0,1,2,3,4<br>multidraw text,arrow,line,circle,image</code><br><span class="wims_emph">text</span> is free hand, <span class="wims_emph">arrow</span> is snap to grid, <span class="wims_emph">line</span> is snap to x-grid, <span class="wims_emph">circle</span> is snap to y-grid, <span class="wims_emph">image</span> is snap to points defined by command <a href='#snaptopoints'>snaptopoints</a>
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> attention: if not set all objects will be set <span class="wims_emph">no snap</span>... unless a generic command <span class="wims_emph">snaptogrid</span> was given before command <span class="wims_emph">multidraw</span>
</li>
<li> commands <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a>, <a href='#snaptofunction'>snaptofunction</a> are <b>not</b> supported amd only functional for command <a href='#userdraw'>userdraw</a>
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
<li> wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
</li>
</ul>
<h3 id='multistrokecolors'>multistrokecolors <a href='#multistrokecolors_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multistrokecolors color_name_1,color_name_2,...,color_name_8</code>
        <ul>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all colors will be <span class="wims_emph">stroke_color</span>, <span class="wims_emph">stroke_opacity</span>
</li>
<li> use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
</li>
<li> wims will <b>not</b> check if the number of colours matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multistrokeopacity'>multistrokeopacity <a href='#multistrokeopacity_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7</code>
        <ul>
<li> float values 0 - 1 or integer values 0 - 255
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> if not set all stroke opacity_ will be set by previous command <code>opacity int,int</code>
</li>
<li> use these up to 7 different stroke opacities for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='multiuserinput'>multiuserinput <a href='#multiuserinput_top' title='return at the command list'>&#8593;</a></h3>
        <code>  multiuserinput 0,1,1,0</code>
        <ul>
<li><span>alternative command: <a id='multiinput' href='#multiinput_top'><code>multiinput</code></a></span></li>
<li> meaning, when the command <span class="wims_emph">multidraw</span> is used <code>multidraw circles,points,lines,triangles</code><br>objects <span class="wims_emph">points</span> and <span class="wims_emph">lines</span> may additionally be <span class="wims_emph">drawn</span> by direct input (inputfields)<br/>all other objects must be drawn with a mouse
</li>
<li> in case of circle | circles a third inputfield for Radius (R) is added. 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
</li>
<li> 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 <span class="wims_emph">hints</span> are pre-filled into the input field.<br>Other coordinate delimiters are <span class="wims_emph">;</span> and <span class="wims_emph">,</span> 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>
<li> in case of a triangle | poly3, three inputfields are provided.
</li>
<li> in case of <span class="wims_emph">text</span> and <span class="wims_emph">multiuserinput=1, 3</span> inputfields will be shown: <span class="wims_emph">x,y,text</span>
</li>
<li> in case of <span class="wims_emph">text</span> and <span class="wims_emph">multiuserinput=0, 1</span> inputfield will be shown: text ... a mouse click will place the text on the canvas.
</li>
<li> may be styled using command <a href="#css">css</a>
</li>
<li> an additional button <span class="wims_emph">stop drawing</span> may be used to combine userbased drawings with <span class="wims_emph">drag&and;drop</span> or <span class="wims_emph">onclick</span> elements
</li>
<li> when exercise if finished (status=done) the buttons will not be shown.<br>To override this default behaviour use command / keyword <span class="wims_emph">status</span>
</li>
<li> use before command <a href='#multidraw'>multidraw</a>
</li>
<li> always use the same sequence as is used for <span class="wims_emph">multidraw</span>
</li>
</ul>
<h3 id='noreset'>noreset <a href='#noreset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  noreset</code>
        <ul>
<li><span>alternative command: <a id='killreset' href='#killreset_top'><code>killreset</code></a></span></li>
<li> keyword
</li>
<li> may come in handy if canvas script code is generated using loops
</li>
<li> if used the following properties will remain to be valid<br><ul><li>filled</li><li>dash settings</li><li>onclick or drag settings</li><li>centering or offset</li></ul>
</li>
<li> if used again, these properies will be reset to the default values and normal behaviour is continued (e.g. the above properties will be reset after 'use' on a canvas object)
</li>
<li> etc etc
</li>
<li> commands <a href='#slider'>slider</a>, <a href='#linear'>linear</a>, <a href='#rotate'>rotate</a>, <a href='#translate'>translate</a>, <a href='#affine'>affine</a> are always active until the 'kill' commands are given: <br><a href='#killlinear'>killlinear</a>, <a href='#killrotate'>killrotate</a>, <a href='#killtranslate'>killtranslate</a> and <a href='#killaffine'>killaffine</a>
</li>
<li> commands like 'opacity', 'linewidth', 'fontsize', 'fontfamily' are only changed when redefined again
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,noreset $wims_name_Example: noreset
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,noreset_oefgraduation $wims_name_Example: noreset_oefgraduation
      
</li>
</ul>
<h3 id='noxaxis'>noxaxis <a href='#noxaxis_top' title='return at the command list'>&#8593;</a></h3>
        <code>  noxaxis</code>
        <ul>
<li> keyword
</li>
<li> if set, the automatic x-axis numbering will be ignored
</li>
<li> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<h3 id='noyaxis'>noyaxis <a href='#noyaxis_top' title='return at the command list'>&#8593;</a></h3>
        <code>  noyaxis</code>
        <ul>
<li> keyword
</li>
<li> if set, the automatic y-axis numbering will be ignored
</li>
<li> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<h3 id='numberline'>numberline <a href='#numberline_top' title='return at the command list'>&#8593;</a></h3>
        <code>  numberline x0,x1,xmajor,xminor,y0,y1</code>
        <ul>
<li> numberline is using xrange/yrange system for all dimensions
</li>
<li> multiple numberlines are allowed ; combinations with command <a href='#grid'>grid</a> is allowed; multiple commands <a href='#xaxis'>xaxis numbering</a> are allowed
</li>
<li> x0 is start x-value in xrange
</li>
<li> x1 is end x-value in xrange
</li>
<li> xmajor is step for major division
</li>
<li> xminor is divisor of xmajor; using small (30% of major tick) tick marks: this behaviour is <span class="wims_emph">hardcoded</span>
</li>
<li> is xminor is an even divisor, an extra tickmark (60% of major tick) is added to the numberline: this behaviour is <span class="wims_emph">hardcoded</span>
</li>
<li> y0 is bottom of numberline; y1 endpoint of major tics
</li>
<li> use command <a href="#linewidth">linewidth</a> to control appearance
</li>
<li> use <a href="#strokecolor">strokecolor</a> and <a href="#opacity">opacity</a> to controle measure line
</li>
<li> for all ticks linewidth and color / opacity are identical.
</li>
<li> if command <a href="#xaxis">xaxis</a> or <a href="#xaxisup">xaxisup</a> is not defined, the labeling will be on major ticks: x0...x1
</li>
<li> use <a href="#fontfamily">fontfamily</a> and <a href="#fontcolor">fontcolor</a> to control fonts settings
</li>
<li> may be used together with <a href="#userdraw">userdraw</a>, <a href="#multidraw">multidraw</a> and <a href="#drag">user drag</a> command family for the extra object drawn onto the numberline
</li>
<li> <a href="#snaptogrid">snaptogrid, snaptopoints etc</a> and <a href="#zoom">zooming and panning</a> is supported
</li>
<li> onclick and dragging of the numberline are not -yet- supported
</li>
<li> note: in case of multiple numberlines, make sure the numberline without special x-axis numbering (e.g. ranging from xmin to xmax) comes first !
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,numberline $wims_name_Example: numberline
      
</li>
</ul>
<h3 id='obabel'>obabel <a href='#obabel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  obabel x,y,type input,molecule smiles-code or file location, extra arguments,extra arguments,...</code>
        <ul>
<li> will call the <span class="wims_emph">obabel</span> program, if installed.
</li>
<li> output will be an svg file
</li>
<li> see documentation of obabel for special keys
</li>
<li> command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
</li>
<li> command <a href='#rotate'>rotate</a> will rotate the object
</li>
<li> can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
</li>
<li> can be set draggable: <code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates...
</li>
<li> snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging<br>technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas
</li>
<li> external files may be loaded if they are present on the server or in the modules <br>for example:<br> obabel 0,0,mol,&#36;module_dir/caffeine.mol,-P100,-xb none
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,obabel_smi $wims_name_Example: obabel_smi
      
</li>
</ul>
<h3 id='opacity'>opacity <a href='#opacity_top' title='return at the command list'>&#8593;</a></h3>
        <code>  opacity [0-255],[0-255]</code>
        <ul>
<li> opacity [0.0 - 1.0],[0.0 - 1.0]
</li>
<li><span>alternative command: <a id='transparent' href='#transparent_top'><code>transparent</code></a></span></li>
<li> first item is stroke opacity, second is fill opacity
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,opacity $wims_name_Example: opacity
      
</li>
</ul>
<h3 id='onclick'>onclick <a href='#onclick_top' title='return at the command list'>&#8593;</a></h3>
        <code>  onclick</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> if the next object is clicked, its <span class="wims_emph">object onclick_or_drag sequence number</span> in fly script is returned by <code>javascript:read_canvas();</code>
</li>
<li> onclick seqeuence numbering starts at <span class="wims_emph">0</span>, e.g. if there are 6 objects set onclick, the first onclick object will have id-number <span class="wims_emph">0</span>, the last id-number <span class="wims_emph">5</span>
</li>
<li> line based objects will show an increase in line width<br>font based objects will show the text in <span class="wims_emph">bold</span> when clicked.
</li>
<li> the click zone (accuracy) is determined by 2&times; the line width of the object
</li>
<li> onclick and <a href="#drag">drag x|y|xy</a> may be combined in a single flyscript (although a single object can <b>not</b> be onclick and draggable at the same time...)
</li>
<li> note: not all objects may be set onclick
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,onclick $wims_name_Example: onclick
      
</li>
</ul>
<h3 id='parallel'>parallel <a href='#parallel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]</code>
        <ul>
<li> affine transformations should be identical to flydraw
</li>
<li> in case of <a href='#rotate'>rotation</a> or <a href='#affine'>affine transformation </a>, command parallel will produce <em>n</em> individual segments, and these may be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span> individually.
</li>
<li> in case of <em>no rotation or transformations</em> the lines can not be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>.
</li>
<li> note: a large number of parallel lines (large <em>n</em>) may result in a canvasdraw error (...simplify your script...it produces too many lines...)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,parallel_click $wims_name_Example: parallel_click
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,parallel $wims_name_Example: parallel
      
</li>
</ul>
<h3 id='plotsteps'>plotsteps <a href='#plotsteps_top' title='return at the command list'>&#8593;</a></h3>
        <code>  plotsteps a_number</code>
        <ul>
<li> default 150
</li>
<li> only used for commands <a href="#curve">curve / plot</a> and <a href="#levelcurve">levelcurve</a>
</li>
<li> use with care !
</li>
</ul>
<h3 id='point'>point <a href='#point_top' title='return at the command list'>&#8593;</a></h3>
        <code>  point x,y,color</code>
        <ul>
<li> draw a single point at (x;y) in color 'color'
</li>
<li> use command <code>linewidth int</code> to adjust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will not resize on zooming (command <code>circle x,y,r,color</code> will resize on zooming)
</li>
<li> attention: in case of command <a href="#rotate">rotate angle</a> a point has rotation center (0:0) in x/y-range
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,point $wims_name_Example: point
      
</li>
</ul>
<h3 id='points'>points <a href='#points_top' title='return at the command list'>&#8593;</a></h3>
        <code>  points color,x1,y1,x2,y2,...,x_n,y_n</code>
        <ul>
<li> draw multiple points at given coordinates in color 'color'
</li>
<li> use command <code>linewidth int</code> to adjust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li> attention: in case of command <a href="#rotate">rotate angle</a> the points have rotation center (0:0) in x/y-range
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,points_1 $wims_name_Example: points_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,points_2 $wims_name_Example: points_2
      
</li>
</ul>
<h3 id='poly'>poly <a href='#poly_top' title='return at the command list'>&#8593;</a></h3>
        <code>  poly color,x1,y1,x2,y2...x_n,y_n</code>
        <ul>
<li> polygon color,x1,y1,x2,y2...x_n,y_n
</li>
<li> draw closed polygon
</li>
<li> use command <span class="wims_emph">fpoly</span> to fill it or use keyword <a href='#filled'>filled</a>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,polygon_1 $wims_name_Example: polygon_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,polygon_2 $wims_name_Example: polygon_2
      
</li>
</ul>
<h3 id='polyline'>polyline <a href='#polyline_top' title='return at the command list'>&#8593;</a></h3>
        <code>  polyline color,x1,y1,x2,y2...x_n,y_n</code>
        <ul>
<li> brokenline color,x1,y1,x2,y2...x_n,y_n
</li>
<li> path color,x1,y1,x2,y2...x_n,y_n
</li>
<li> remark: there is <b>no</b> command polylines | brokenlines | paths ... just use multiple commands <code>polyline, x1,y1,x2,y2...x_n,y_n</code>
</li>
<li> remark: there are commands <code>userdraw path(s),color</code> and <code>userdraw polyline,color</code>... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s)<br>the polyline userdraw command is analogue to this polyline|brokenline command
</li>
<li> the command interconnects the points in the given order with a line (canvasdraw will not close the drawing: use command <a href="#poly">polygon</a> for this)
</li>
<li> use command <a href='#segments'>segments</a> for a series of segments. These may be clicked/dragged individually
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,polyline_1 $wims_name_Example: polyline_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,polyline_2 $wims_name_Example: polyline_2
      
</li>
</ul>
<h3 id='popup'>popup <a href='#popup_top' title='return at the command list'>&#8593;</a></h3>
        <code>  popup</code>
        <ul>
<li> keyword (no arguments)
</li>
<li> if fly-script starts with keyword <span class="wims_emph">popup</span>, the canvas image will be exclusively in a popup window (xsize px &times; ysize px)
</li>
<li> if keyword <span class="wims_emph">popup</span> is used after command <code>size xsize,ysize</code> the canvas will also be displayed in a popup window with size <span class="wims_emph">xsize &times; ysize</span>
</li>
<li> the popup window will be embedded into the page as a normal image, when <span class="wims_emph">status=done</span>; override with keyword <a href="#status">nostatus</a>
</li>
<li> to access the read_canvas and read_dragdrop functions in a popup window, use:<br> <code> 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()+"
canvas="+fun2();<br> };</code>
</li>
<li> to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br>where in <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
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,popup $wims_name_Example: popup
      
</li>
</ul>
<h3 id='protractor'>protractor <a href='#protractor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  protractor x,y,x_width,type,mode,use_a_scale</code>
        <ul>
<li> x,y are the initial location
</li>
<li> x_width: give the width in x-coordinate system (e.g. not in pixels !)
</li>
<li> type = 1: a triangle range 0 - 180<br>type = 2: a circle shape 0 - 360
</li>
<li> 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
</li>
<li> 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>
</li>
<li> use_scale = 1: the protractor will have some scale values printed; use_scale=0 to disable
</li>
<li> the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor...
</li>
<li> commands <span class="wims_emph">stroke_color | fill_color | linewidth | opacity | font_family</span> will determine the looks of the protractor.
</li>
<li> default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br>use command <span class="wims_emph">precision</span> to set the reply precision.
</li>
<li> if combined with a ruler, use replyformat = 32
</li>
<li> command <code>snap_to_grid</code> may be used to assist the pupil at placing the protractor
</li>
<li> when using command <span class="wims_emph">zoom</span>, 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>technical: the actual <span class="wims_emph">protractor</span> 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 <span class="wims_emph">high-speed dragging and rotating</span>.<br>I've limited its size to xsize &times; ysize e.g. the same size as the visual canvas...
</li>
<li> only one protractor allowed (for the time being)
</li>
<li> 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...
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,protractor $wims_name_Example: protractor
      
</li>
</ul>
<h3 id='pixels'>pixels <a href='#pixels_top' title='return at the command list'>&#8593;</a></h3>
        <code>  pixels color,x1,y1,x2,y2,x3,y3...</code>
        <ul>
<li> draw rectangular "points" with diameter 1 pixel
</li>
<li> pixels can <b>not</b> be dragged or clicked
</li>
<li> "pixelsize = 1" may be changed by command <code>pixelsize int</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,pixels $wims_name_Example: pixels
      
</li>
</ul>
<h3 id='pixelsize'>pixelsize <a href='#pixelsize_top' title='return at the command list'>&#8593;</a></h3>
        <code>  pixelsize int</code>
        <ul>
<li> in case you want to deviate from default pixelsize = 1(...)
</li>
<li> pixelsize 100 is of course a filled rectangle 100px &times; 100px
</li>
</ul>
<h3 id='piechart'>piechart <a href='#piechart_top' title='return at the command list'>&#8593;</a></h3>
        <code>  piechart xc,yc,radius,'data+colorlist'</code>
        <ul>
<li> (xc: yc) center of circle diagram in xrange/yrange
</li>
<li> radius in pixels
</li>
<li> 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>
<li> example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white
</li>
<li> the number of colors must match the number of data.
</li>
<li> 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,...
</li>
<li> use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colours
</li>
<li> use command <a href='#legend'>legend</a> to automatically create a legend using the same colours as pie segments; unicode allowed in legend; expect javascript trouble if the amount of <span class="wims_emph">pie-slices</span>, <span class="wims_emph">pie-colors</span>, <span class="wims_emph">pie-legend-titles</span> do not match, a javascript console is your best friend...<br>use command <span class="wims_emph">fontfamily</span> to set the font of the legend.
</li>
<li> use command <a href='centered'>centered</a> to place <a href='#legend'>legend</a> text inside the piechart. The text is using the same color as the pie segment: use (fill) opacity to enhance visibility.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,piechart_1 $wims_name_Example: piechart_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,piechart_2 $wims_name_Example: piechart_2
      
</li>
</ul>
<h3 id='range'>range <a href='#range_top' title='return at the command list'>&#8593;</a></h3>
        <code>  range xmin,xmax,ymin,ymax</code>
        <ul>
<li> if not given: 0,xsize,0,ysize (eg in pixels)
</li>
</ul>
<h3 id='rays'>rays <a href='#rays_top' title='return at the command list'>&#8593;</a></h3>
        <code>  rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n</code>
        <ul>
<li> draw rays in color 'color' and center (xc:yc)
</li>
<li> may be set draggable or onclick (every individual ray)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rays_onclick $wims_name_Example: rays_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rays_drag_xy $wims_name_Example: rays_drag_xy
      
</li>
</ul>
<h3 id='rect'>rect <a href='#rect_top' title='return at the command list'>&#8593;</a></h3>
        <code>  rect x1,y1,x2,y2,color</code>
        <ul>
<li> use command <code>frect x1,y1,x2,y2,color</code> for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>filled</a> before command <code>rect x1,y1,x2,y2,color</code>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> note: internally a rect is defined with 4 points. So when performing some affine transformation, other than translation, it will result in some morphing of the rectangle !<br/>this is a deviation of flydraw's rect&amp;affine
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rect $wims_name_Example: rect
      
</li>
</ul>
<h3 id='rects'>rects <a href='#rects_top' title='return at the command list'>&#8593;</a></h3>
        <code>  rects color,x1,y1,x2,y2,.....</code>
        <ul>
<li> use command <code>frect color,x1,y1,x2,y2,.....</code> for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>filled</a> before command <code>rects color,x1,y1,x2,y2,....</code>
</li>
<li> use command <code>fillcolor color</code> before <span class="wims_emph">frects</span> to set the fill colour.
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rects $wims_name_Example: rects
      
</li>
</ul>
<h3 id='replyformat'>replyformat <a href='#replyformat_top' title='return at the command list'>&#8593;</a></h3>
        <code>  replyformat number</code>
        <ul>
<li> use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
</li>
<li> default values should be fine !
</li>
<li> use command <code>precision [0,1,10,100,1000,10000...]</code> before command <span class="wims_emph">replyformat</span> to set the desired number of decimals in the student reply / drawing
</li>
<li> the last value for <span class="wims_emph">precision int</span> will be used to calculate the reply coordinates, if needed (read_canvas();)
</li>
<li> choose<ul><li>replyformat 1: <code>x1,x2,x3,x4....x_n<br>y1,y2,y3,y4....y_n</code> x/y in pixels</li><li>replyformat 2: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 3: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in pixels, r in pixels</li><li>replyformat 4: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in xrange / yrange coordinate system, r in pixels</li><li>replyformat 5: <code> 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</code> x/y in pixels</li><li>replyformat 6: <code> 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</code> x/y in xrange / yrange coordinate system</li><li>replyformat 7: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in pixels</li><li>replyformat 8: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 9: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in pixels</li><li>replyformat 10: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 11: <code> 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</code> x/y in xrange / yrange coordinate system</li><li>replyformat 12: <code> 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</code> x/y in pixels</li><li>replyformat 13: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 14: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2</code> x/y in pixels</li><li>replyformat 15: reply from inputfields,textareas <code>reply1,reply2,reply3,...,reply_n</code></li><li>replyformat 16: mathml input fields</li><li>replyformat 17: read <span class="wims_emph">userdraw text,color</span> only <code>x1,y1,text1 
 x2,y2,text2...
...x_n,y_n,text_n </code> x/y-values are in xrange/yrange</li><li>replyformat 18: read_canvas() will read all interactive clocks in <code>H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</code></li><li>replyformat 19: read_canvas() will return the object number of marked / clicked object (clock), analogue to (shape library) onclick command</li><li>replyformat 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, e.g. expect something like 0:-5:4,1:6:2,2:-2:-5, the first image position is (-5:4), the second image position is (6:2) and the third image position is (-2:-5) <li>replyformat 21: <code> (x1:y1) (x2:y2) ... (x_n:y_n)</code> verbatim coordinate return</li><li>replyformat 22: returns an array .... <code>reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 23: can only be used for drawtype <span class="wims_emph">polyline</span>. 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 gives <code>x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn</code>; multiple occurences will be filtered out. The reply will be in x-y-range (xreply 
 yreply)</li><li>replyformat 24: read all inputfield values: even those set <span class="wims_emph">readonly</span></li><li>replyformat 25: <code> angle1,angle2;...;angle_n</code> will return the radius (one or many) of the user drawn circle segment in degrees</li><li>replyformat 26: <code> rad1,rad2,...rad_n</code> will return the radius (one or many) of the user drawn circle segment in radians</li><li>replyformat 27: return (only) userdraw inputfields <code>x1,y1,text1<br> x2,y2,text2...<br>...x_n,y_n,textn</code></li><li>replyformat 28: <code> x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> x / y / r in xrange / yrange coordinate system: may be used to reinput into command <code>circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> will not return anything else (e.g. no inputfields, text etc)</li><li>replyformat 34: a special for OEF and dragging external images -included via commands <a href='#copy'>copy</a> or <a href='#copyresized'>copyresized</a> there will be an extra function <code>read_canvas_images()</code> for reading the coordinates of the images.<br>for now this is a unique function, e.g. there is no <span class="wims_emph">canvas id</span> linked to it. (TO DO !!! 18/5/2019)</li></ul>
</li>
<li> special replyformat = 100 ; will access to the raw javascript object data...use: read_dragdrop([property,property,...])<br>for example properies like 'clicked','text', 'angle' , 'x'
</li>
</ul>
<h3 id='roundrect'>roundrect <a href='#roundrect_top' title='return at the command list'>&#8593;</a></h3>
        <code>  roundrect x1,y1,x2,y2,radius in px,color</code>
        <ul>
<li> use command <code>froundrect x1,y1,x2,y2,radius,color</code> for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>filled</a> before command <code>roundrect x1,y1,x2,y2,radius,color</code>
</li>
<li> fillcolor will be identical to <span class="wims_emph">color</span>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,roundrect $wims_name_Example: roundrect
      
</li>
</ul>
<h3 id='roundrects'>roundrects <a href='#roundrects_top' title='return at the command list'>&#8593;</a></h3>
        <code>  roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....</code>
        <ul>
<li> for filled roundrects use command/keyword <a href='#filled'>filled</a> before command
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,roundrects $wims_name_Example: roundrects
      
</li>
</ul>
<h3 id='ruler'>ruler <a href='#ruler_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ruler x,y,x-width,y-height,mode</code>
        <ul>
<li> x,y are the initial location
</li>
<li> x-width, y-height are the ruler dimensions width &amp; height in xy-coordinate system
</li>
<li> the ruler scale is by definition the x-scale, set by command <span class="wims_emph">xrange</span>. For example: a ruler x-width of 6 will have a scale ranging from 0 to 6
</li>
<li> mode: use -1 to set the ruler interactive (eg mouse movement of ruler; drag &amp; rotate)<br>use mode = '0&deg; - 360&deg;' to set the ruler with a static angle of some value
</li>
<li> if combined with a protractor, use replyformat = 32
</li>
<li> only one ruler allowed (for the time being)
</li>
<li> when using command <span class="wims_emph">zoom</span>, pay <b>attention</b> to the size and symmetry of your canvas to avoid a partial image, locate the start position near the center of the visual canvas; technical: the actual <span class="wims_emph">ruler</span> is just a static generated image in a new canvas-memory. This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas. That is the reason for the <span class="wims_emph">high-speed dragging and rotating</span>. I have limited its size to xsize &times; ysize e.g. the same size as the visual canvas...
</li>
<li> usage: first left click on the ruler will activate dragging; a second left click will activate rotating (just move mouse around), a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3), a next click will restart this sequence...
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ruler_interactive $wims_name_Example: ruler_interactive
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ruler_set_degree_45 $wims_name_Example: ruler_set_degree_45
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ruler_set_degree_125 $wims_name_Example: ruler_set_degree_125
      
</li>
</ul>
<h3 id='reset'>reset <a href='#reset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  reset</code>
        <ul>
<li> keyword
</li>
<li> disables the effects of the <a href="noreset">noreset</a> command
</li>
<li> so the next objects will not be <a href="#filled">filled</a> and <a href="#dashed">dashed</a>
</li>
</ul>
<h3 id='resetoffset'>resetoffset <a href='#resetoffset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  resetoffset</code>
        <ul>
<li> keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
</li>
<li> 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
</li>
</ul>
<h3 id='rotate'>rotate <a href='#rotate_top' title='return at the command list'>&#8593;</a></h3>
        <code>  rotate rotation_angle</code>
        <ul>
<li> angle in degrees
</li>
<li> (only) the next object will be rotated is given angle
</li>
<li> positive values rotate counter clockwise
</li>
<li> attention: all objects will be rotated around their first point...<br><code>rotate 45<br>triangle 1,1,5,1,3,4,red</code><br>will rotate 45 degrees around point (1:1)
</li>
<li> 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>
</li>
<li> 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
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rotate_1 $wims_name_Example: rotate_1
      
</li>
</ul>
<h3 id='rotationcenter'>rotationcenter <a href='#rotationcenter_top' title='return at the command list'>&#8593;</a></h3>
        <code>  rotationcenter x_center,y_center</code>
        <ul>
<li> define an rotation center in your x/y-coordinate system
</li>
<li> wims will not check the validity of your input; use javascript console to debug any erors
</li>
<li> if not defined a rotation will be around the first point of an object
</li>
<li> to be used before command <a href="#rotate">rotate</a>
</li>
<li> use <a href="#killrotate">killrotate</a> to reset to 'null' <br/>(eg. the rotationcenter of the next object(s) will be the first (x;y) coordinate of the object(s))
</li>
<li> all other commands will use this rotation center, unless a <a href="#killrotation">killrotation</a> is given
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rotationcenter $wims_name_Example: rotationcenter
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,rotationcenter_slider $wims_name_Example: rotationcenter_slider
      
</li>
</ul>
<h3 id='size'>size <a href='#size_top' title='return at the command list'>&#8593;</a></h3>
        <code>  size width,height</code>
        <ul>
<li> set canvas size in pixels
</li>
<li> mandatory first command (can only be preceded by keyword <a href="#popup">popup</a>)
</li>
<li> 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
</li>
</ul>
<h3 id='segment'>segment <a href='#segment_top' title='return at the command list'>&#8593;</a></h3>
        <code>  segment x1,y1,x2,y2,color</code>
        <ul>
<li><span>alternative command: <a id='seg' href='#seg_top'><code>seg</code></a></span></li>
<li> draw a line segment between points (x1:y1)--(x2:y2) in color <span class="wims_emph">color</span>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,segment_onclick $wims_name_Example: segment_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,segment_drag_y $wims_name_Example: segment_drag_y
      
</li>
</ul>
<h3 id='segments'>segments <a href='#segments_top' title='return at the command list'>&#8593;</a></h3>
        <code>  segments color,x1,y1,x2,y2,...,x_n,y_n</code>
        <ul>
<li><span>alternative command: <a id='segs' href='#segs_top'><code>segs</code></a></span></li>
<li> draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color <span class="wims_emph">color</span>
</li>
<li> use command <span class="wims_emph">linewidth int</span> to adjust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,segments_onclick $wims_name_Example: segments_onclick
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,segments_drag_y $wims_name_Example: segments_drag_y
      
</li>
</ul>
<h3 id='setlimits'>setlimits <a href='#setlimits_top' title='return at the command list'>&#8593;</a></h3>
        <code>  setlimits</code>
        <ul>
<li> keyword: if set, it will produce 4 inputfields for <span class="wims_emph">xmin,xmax,ymin,ymax</span> and an <span class="wims_emph">ok</span> button
</li>
<li> may be used for inputfield based zooming / panning
</li>
<li> may be styled using command <a href="#css">css</a>
</li>
<li> use commands <a href="#xlabel">xlabel / ylabel</a> to change text from xmin to <span class="wims_emph">xlabel</span> etc
</li>
<li> note: the input value will not be checked on validity
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,setlimits $wims_name_Example: setlimits
      
</li>
</ul>
<h3 id='setpixel'>setpixel <a href='#setpixel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  setpixel x,y,color</code>
        <ul>
<li> A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
</li>
<li> pixels can <b>not</b> be dragged or clicked
</li>
<li> "pixelsize = 1" may be changed by command <code>pixelsize int</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,setpixel $wims_name_Example: setpixel
      
</li>
</ul>
<h3 id='slider'>slider <a href='#slider_top' title='return at the command list'>&#8593;</a></h3>
        <code>  slider start_value,end_value,width px,height px,type,label</code>
        <ul>
<li> type may be: <span class="wims_emph">x,y,angle</span>
</li>
<li> if a slider value display is desired, use for argument <span class="wims_emph">type</span>: <span class="wims_emph">x display</span>, <span class="wims_emph">y display</span>, <span class="wims_emph">angle radian</span>, <span class="wims_emph">angle degree</span>
</li>
<li> is the slider is used for animation, add keyword <span class="wims_emph">anim</span> or <span class="wims_emph">animate</span> to <span class="wims_emph">type</span>; for now only one animated slider may be used...
</li>
<li> default behaviour is: click on an object to use its slider(s)<br/>to use sliders without clicking on an object, use for <span class="wims_emph">type</span> keyword <span class="wims_emph">active</span><br>eg: <code>slider -2*pi,2*pi,300,30,angle degree active,Rotate</code>
</li>
<li> if a unit (or something like that...) for x/y-value display is needed, use commands <span class="wims_emph">xunit</span> and / or <span class="wims_emph">yunit</span>
</li>
<li> if the translation should be performed using a function, use for type: <span class="wims_emph">x function</span>, <span class="wims_emph">y function</span><br>use commands <span class="wims_emph">sliderfunction_x</span> and/or <span class="wims_emph">sliderfunction_y</span> before the slider command to define the functions. Example:<code>sliderfunction_x x^2<br>sliderfunction_y y^2<br>slider -5,5,100,100,xy function,Some_Text<br>...some stuff to slide<br>killslider<br>sliderfunction_x x^2-2<br>slider -15,15,100,10,x function,Some_Other_Text<br>...more stuff to slide<br>killslider... etc</code>
</li>
<li> use command <span class="wims_emph">slider</span> before draggable/clickable objects.
</li>
<li> drag and drop may be combined with rotation slider<br>for example an arrow rotated by a slider may be placed anywhere (drag&drop)<br><code>size 300,300<br>xrange -5,5<br>yrange -5,5<br>grid 1,1,grey<br>linewidth 3<br>drag xy<br>fillcolor orange<br>strokecolor blue<br>slider 0,2*pi,250,30,angle degrees,Rotate arrow<br>arrow 2,2,5,5,8,red</code><br>note: except a combination 'drag' and 'slider' for command 'latex, katex, mathml, html, obabel'
</li>
<li> no slider for a math function, these can be traced using command <span class="wims_emph">trace_jscurve some_function_in_x</span>
</li>
<li> a slider will affect all draggable objects after the <span class="wims_emph">slider</span> command...<br>and can be used to group translate / rotate several objects...<br>until a next <span class="wims_emph">slider</span> or keyword <span class="wims_emph">killslider</span>
</li>
<li> amount of sliders is not limited.
</li>
<li> a slider can not be set <span class="wims_emph">snaptogrid</span> or other <span class="wims_emph">snapto*</span> : you may always use 'drag xy' in combination with the slider objects
</li>
<li> <code>javascript:read_dragdrop();</code> will return an array with <span class="wims_emph">object_number:slider_value</span>
</li>
<li> every draggable object may have its own slider (no limit in amount of sliders)
</li>
<li> label: some slider text. <br>Note: on <a target='new' href='https://katex.org'>KaTeX</a> enabled wims, TeX produced by wims command <span class="wims_emph">mathmlmath</span>, is allowed.
</li>
<li> use fillcolor for slider controlkey
</li>
<li> use strokecolor for slider bar
</li>
<li> use fontfamily / fontcolor to set used fonts
</li>
<li> use opacity (only fill opacity will be used) to set transparency
</li>
<li> the slider canvas will be added to the <span class="wims_emph">tooltip div</span>: so incompatible with command tooltip ; setlimits etc
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,slider_x_y_angle $wims_name_Example: slider_x_y_angle
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,slider_click $wims_name_Example: slider_click
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,slider_active $wims_name_Example: slider_active
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,slider_animate $wims_name_Example: slider_animate
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,slider_html_image $wims_name_Example: slider_html_image
      
</li>
</ul>
<h3 id='sgraph'>sgraph <a href='#sgraph_top' title='return at the command list'>&#8593;</a></h3>
        <code>  sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color</code>
        <ul>
<li> primitive implementation of a <span class="wims_emph">broken scale</span> graph...
</li>
<li> 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 <span class="wims_emph">lost</span>.<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>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,sgraph $wims_name_Example: sgraph
      
</li>
</ul>
<h3 id='snaptofunction'>snaptofunction <a href='#snaptofunction_top' title='return at the command list'>&#8593;</a></h3>
        <code>  snaptofunction some_function_in_x,some_funtion_in_y</code>
        <ul>
<li><span>alternative command: <a id='snaptofun' href='#snaptofun_top'><code>snaptofun</code></a></span></li>
<li> the next object will snap to the calculated values
</li>
<li> note: snaptofun is probably not really useful feature...
</li>
<li> if you want only modification of y-values,just use: <code>snaptofunction x,5*sin(1/y)</code>
</li>
<li> if you want only modification of x-values,just use: <code>snaptofunction 5*sin(1/x),y</code>
</li>
<li> for now only one instance of <span class="wims_emph">snaptofunction</span> is allowed
</li>
<li> use rawmath on your functions: no validity checking is done by wims !
</li>
<li> note: switching x and y coordinates? <code>snaptofunction y,x</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptofunction_1 $wims_name_Example: snaptofunction_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptofunction_2 $wims_name_Example: snaptofunction_2
      
</li>
</ul>
<h3 id='snaptopoints'>snaptopoints <a href='#snaptopoints_top' title='return at the command list'>&#8593;</a></h3>
        <code>  snaptopoints x1,y1,x2,y2,x3,y3....</code>
        <ul>
<li> a userdraw object will snap to these points.
</li>
<li> the array size (e.g. the number of points) of command <span class="wims_emph">snaptopoints</span> is limited by constant MAX_INT (canvasdraw.h)<br/>this command may be repeated multiple times (no limit) to add points
</li>
<li> a draggable object (use command <span class="wims_emph">drag x|y|xy</span>) will snap to the closed of these points when dragged (mouseup)
</li>
<li> other options: use keyword <span class="wims_emph">snaptogrid</span>, <span class="wims_emph">xsnaptogrid</span> or <span class="wims_emph">ysnaptogrid</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptopoints $wims_name_Example: snaptopoints
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptopoints $wims_name_Example: snaptopoints
      
</li>
</ul>
<h3 id='snaptogrid'>snaptogrid <a href='#snaptogrid_top' title='return at the command list'>&#8593;</a></h3>
        <code>  snaptogrid</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command <span class="wims_emph">drag x|y|xy</span>) will snap to the given grid when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to xmajor / ymajor grid
</li>
<li> if no grid is defined, points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1)
</li>
<li> if you do not want a visible grid, but you only want a <span class="wims_emph">snaptogrid</span> with some value...define this grid with opacity 0.
</li>
<li> if xminor / yminor is defined,(use keyword <span class="wims_emph">axis</span> to activate the minor steps) the drawing will snap to xminor and yminor<br>use only even dividers in x/y-minor...for example <code>snaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code> will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptogrid_1 $wims_name_Example: snaptogrid_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,snaptogrid_2 $wims_name_Example: snaptogrid_2
      
</li>
</ul>
<h3 id='square'>square <a href='#square_top' title='return at the command list'>&#8593;</a></h3>
        <code>  square x,y,side (px),color</code>
        <ul>
<li> draw a square with left top corner (x:y) with side <span class="wims_emph">side</span> in color 'color'
</li>
<li> use command <code>fsquare x,y,side,color</code> for a filled square
</li>
<li> use command/keyword <a href='#filled'>filled</a> before command <code>square x,y,side,color</code>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,square $wims_name_Example: square
      
</li>
</ul>
<h3 id='status'>status <a href='#status_top' title='return at the command list'>&#8593;</a></h3>
        <code>  status</code>
        <ul>
<li> keyword
</li>
<li> alernative: nostatus
</li>
<li> used to override the effects of <span class="wims_emph">status=done</span> in wims (answer.phtml)
</li>
<li> affects <span class="wims_emph">readonly</span> in inputfields / textareas in canvasimage and all userdraw based commands
</li>
<li> e.g.: if keyword <span class="wims_emph">status</span> is set, the pupil will be able to modify the canvas when the <span class="wims_emph">wims &#36;status variable</span> is set to <span class="wims_emph">done</span>
</li>
</ul>
<h3 id='string'>string <a href='#string_top' title='return at the command list'>&#8593;</a></h3>
        <code>  string color,x,y,the text string</code>
        <ul>
<li> may be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li> note: when set <span class="wims_emph">onclick</span>, use an extra command <span class="wims_emph">fontsize</span> (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier
</li>
<li> unicode supported: <code>string red,0,0,\u2232</code><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a>
</li>
<li> use a command like <code>fontfamily italic 24px Arial</code> to set fonts on browser that support font change
</li>
<li> super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>The font family for the sub/sup string will be Helvetica e.g. your font family settings will be ignored <br>to force end the subscript/supscript, use an extra space...see example:
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,string_sup_sub $wims_name_Example: string_sup_sub
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,string $wims_name_Example: string
      
</li>
</ul>
<h3 id='stringup'>stringup <a href='#stringup_top' title='return at the command list'>&#8593;</a></h3>
        <code>  stringup color,x,y,rotation_degrees,the text string</code>
        <ul>
<li> may be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li> note: when set <span class="wims_emph">onclick</span>, use an extra command <span class="wims_emph">fontsize</span> (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier
</li>
<li> unicode supported: <code>stringup red,0,0,45,\u2232</code>
</li>
<li> use a command like <code>fontfamily bold 34px Courier</code> to set fonts on browser that support font change
</li>
<li> you could use keyword <a href='#yoffset'>yoffset</a> to -sometimes- do a small correction of text placement under/above a point (e.g. text &amp; point have thesame coordinates)
</li>
<li> note: no need to <span class="wims_emph">killrotate</span> after <span class="wims_emph">stringup</span><br><code>onclick<br>rotate 45<br>string red,0,0,AAAAAA<br/>killrotate<br>string red,4,4,BBBBBB</code><br>is identical with:<br><code>onclick<br>stringup red,0,0,45,AAAAAA<br>string red,4,4,BBBBBB</code>
</li>
<li> super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see example:
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,stringup_sub_sup $wims_name_Example: stringup_sub_sup
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,stringup $wims_name_Example: stringup
      
</li>
</ul>
<h3 id='highlight'>highlight <a href='#highlight_top' title='return at the command list'>&#8593;</a></h3>
        <code>  highlight color,opacity,linewidth</code>
        <ul>
<li> NOT IMPLEMENTED
</li>
<li> use command <span class="wims_emph">onclick</span>: when the object receives a userclick it will increase its linewidth
</li>
</ul>
<h3 id='strokecolor'>strokecolor <a href='#strokecolor_top' title='return at the command list'>&#8593;</a></h3>
        <code>  strokecolor colorname or #hex</code>
        <ul>
<li> to be used for commands that do not supply a color argument (like command <span class="wims_emph">linegraph</span>)
</li>
</ul>
<h3 id='text'>text <a href='#text_top' title='return at the command list'>&#8593;</a></h3>
        <code>  text fontcolor,x,y,font,text_string</code>
        <ul>
<li> font may be described by keywords: giant,huge,normal,small,tiny
</li>
<li> use command <span class="wims_emph">fontsize</span> to increase base fontsize for these keywords
</li>
<li> may be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span>
</li>
<li> backwards compatible with flydraw
</li>
<li> unicode supported: text red,0,0,huge,\u2232
</li>
<li> special: use '_' and '^' to imitate html sup/sub, like H_3O^+ + OH^\u22i2 \u2192 2H_2 O
</li>
<li> much better to use command <a href='#string'>string</a> combined with <a href='#fontfamily'>fontfamily</a> for a more fine grained control over html5 canvas text element
</li>
<li> super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see <a href='#string'>string </a> command
</li>
<li> Avoid mixing old flydraw commands <span class="wims_emph">text</span>, <span class="wims_emph">textup</span> with new canvasdraw commands <span class="wims_emph">string</span>, <span class="wims_emph">stringup</span>. If the fontfamily was set completely like <code>fontfamily italic 24px Arial</code>. In that case reset <span class="wims_emph">fontfamily</span> to something lke <span class="wims_emph">fontfamily Arial</span> before the old flydraw commands.
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,text $wims_name_Example: text
      
</li>
</ul>
<h3 id='textarea'>textarea <a href='#textarea_top' title='return at the command list'>&#8593;</a></h3>
        <code>  textarea x,y,cols,rows,readonly,value</code>
        <ul>
<li> may be further controlled by <a href="#css">css</a>
</li>
<li> if <span class="wims_emph">&#36;status=done</span> (e.g. in answer.phtml) the inputfield will be cleared and set readonly. Override this by keyword <a href="#status">status</a>.
</li>
<li> if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (<code>javascript:read_canvas();</code>)
</li>
<li> keyword <span class="wims_emph">xoffset | centered</span> is not active for command <span class="wims_emph">textarea</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,textarea $wims_name_Example: textarea
      
</li>
</ul>
<h3 id='textfill'>textfill <a href='#textfill_top' title='return at the command list'>&#8593;</a></h3>
        <code>  textfill x0,y0,color,some_text</code>
        <ul>
<li> x0,y0 in xrange / yrange
</li>
<li> color will be used for the font color
</li>
<li> use command <a href="#fontfamily">fontfamily</a> to set font type and size
</li>
<li> there is also a command <a href="#userdraw">userdraw textfill,color,some_text</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,textfill $wims_name_Example: textfill
      
</li>
</ul>
<h3 id='textup'>textup <a href='#textup_top' title='return at the command list'>&#8593;</a></h3>
        <code>  textup fontcolor,x,y,font,text_string</code>
        <ul>
<li> can <b>not</b> be set <span class="wims_emph">onclick</span> or <span class="wims_emph">drag xy</span> (because of translaton matrix...mouse incompatible)
</li>
<li> font may be described by keywords: giant,huge,normal,small,tiny
</li>
<li> use command <span class="wims_emph">fontsize</span> to increase base fontsize for the keywords
</li>
<li> backwards compatible with flydraw
</li>
<li> unicode supported: textup red,0,0,huge,\u2232
</li>
<li> use command <span class="wims_emph">stringup</span> and <span class="wims_emph">fontfamily</span> for a more fine grained control over html5 canvas text element
</li>
<li> Avoid mixing old flydraw commands <span class="wims_emph">text</span>, <span class="wims_emph">textup</span> with new canvasdraw commands <span class="wims_emph">string</span>; <span class="wims_emph">stringup</span>. If the fontfamily was set completely like <code>fontfamily italic 24px Arial</code>. In that case reset <span class="wims_emph">fontfamily</span> to something like <span class="wims_emph">fontfamily Arial</span> before the old flydraw commands.
</li>
</ul>
<h3 id='trace_jscurve'>trace_jscurve <a href='#trace_jscurve_top' title='return at the command list'>&#8593;</a></h3>
        <code>  trace_jscurve some_math_function</code>
        <ul>
<li> will use a crosshair to trace the jsmath curve
</li>
<li> two inputfields will display the current x/y-values (numerical evaluation by javascript)
</li>
<li> default labels <span class="wims_emph">x</span> and <span class="wims_emph">y</span>; use commands <span class="wims_emph">xlabel some_x_axis_name</span> and <span class="wims_emph">ylabel some_y_axis_name</span> to customize the labels for the input fields
</li>
<li> use commands fontsize and css to format the fonts for labels and inputfields.
</li>
<li> use commands <span class="wims_emph">linewidth, strokecolor, crosshairsize</span> to adjust the corsshair.
</li>
<li> the client browser will convert your math function to javascript math.<br>use parenthesis and rawmath: use 2*x instead of 2x etc etc no check is done on the validity of your function and/or syntax (use error console to debug any errors...)
</li>
<li> be aware that the formulas of the plotted function(s) can be found in the page javascript source
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,trace_jscurve $wims_name_Example: trace_jscurve
      
</li>
</ul>
<h3 id='trange'>trange <a href='#trange_top' title='return at the command list'>&#8593;</a></h3>
        <code>  trange tmin,tmax</code>
        <ul>
<li><span>alternative command: <a id='ranget' href='#ranget_top'><code>ranget</code></a></span></li>
<li> default -2,2
</li>
</ul>
<h3 id='translation'>translation <a href='#translation_top' title='return at the command list'>&#8593;</a></h3>
        <code>  translation tx,ty</code>
        <ul>
<li><span>alternative command: <a id='translate' href='#translate_top'><code>translate</code></a></span></li>
<li> will translate the next objects tx in xrange and ty in yrange
</li>
<li> use command <span class="wims_emph">killtranstation</span> to end the command
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,translation $wims_name_Example: translation
      
</li>
</ul>
<h3 id='triangle'>triangle <a href='#triangle_top' title='return at the command list'>&#8593;</a></h3>
        <code>  triangle x1,y1,x2,y2,x3,y3,color</code>
        <ul>
<li> use ftriangle or keyword <a href='#filled'>filled</a> for a solid triangle
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,triangle $wims_name_Example: triangle
      
</li>
</ul>
<h3 id='triangles'>triangles <a href='#triangles_top' title='return at the command list'>&#8593;</a></h3>
        <code>  triangles color,x1,y1,x2,y2,x3,y3,...</code>
        <ul>
<li> use ftriangles or keyword <a href='#filled'>filled</a> for solid triangles
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,triangles $wims_name_Example: triangles
      
</li>
</ul>
<h3 id='userboxplot'>userboxplot <a href='#userboxplot_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userboxplot</code>
        <ul>
<li> keyword, no arguments
</li>
<li> use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
</li>
<li> if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the <span class="wims_emph">draw_boxplot</span> function
</li>
<li> for example: put the canvas-script into a html element with id='boxplot' and set style='display:none'<br>define a variable called <span class="wims_emph">student_boxplot</span> and fill it with the 5 student-data (from inputfields or something)<br><code>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>};</code><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)
</li>
</ul>
<h3 id='userboxplotdata'>userboxplotdata <a href='#userboxplotdata_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userboxplotdata</code>
        <ul>
<li> keyword, no arguments
</li>
<li> use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
</li>
<li> if set, the student will have to generate some statistical data. These data should be put in a named array <span class="wims_emph">student_boxplot_data</span>
</li>
<li> <span class="wims_emph">min,Q1,median,Q3,max</span> are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
</li>
<li> see command <a href="#userboxplot">userboxplot</a> for calling 'draw_boxplot()'
</li>
</ul>
<h3 id='userdraw'>userdraw <a href='#userdraw_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userdraw object_type,color</code>
        <ul>
<li> only a single object_type is allowed.
</li>
<li> right mouse click will remove last drawn object.
</li>
<li> for multiple different 'userdraw' objects in an exercise, use command <a href="#multidraw">multidraw</a>
</li>
<li> 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>curvedarrow</li><li>curvedarrows</li><li>curvedarrow2</li><li>curvedarrows2</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> 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 <span class="wims_emph">fill algorithm</span> 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><span class="wims_emph">clickfill | pattern filling</span> 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 <br>an inputfield is provided, unicode allowed. The text is drawn a the mouse click, or if used with command <span class="wims_emph">userinput inputfield</span> also at the given x/y-coordonates</li><li>arc</li><li>arcs</li><li>image<br/>only a single "image" of every supported type(*) may be added to canvas window from the surrounding html page.<br>the image should have an 'id' and an onclick handler.<br>(*) supported types are <span class="wims_emph">svg</span>,<span class="wims_emph">bitmap</span>,<span class="wims_emph">p-element</span>,<span class="wims_emph">div-element</span> and <span class="wims_emph">mathml/tex-code</span> with <span class="wims_emph">\mmlid{int}</span>.</li><li>images</li><li>input<br/>place a single inputfield on <span class="wims_emph">canvas</span> <br>use commands 'css' for css styling: use command <span class="wims_emph">linewidth</span> 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><li>function : identical to <a href="#userinput">userinput function</a></li></ul>
</li>
<li> note: mouselisteners are only active if <span class="wims_emph">&#36;status != done</span> (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword <span class="wims_emph">status</span> (no arguments required)
</li>
<li> note: object_type text: Any string or multiple strings may be placed anywhere on the canvas.<br>Use command <span class="wims_emph">fontfamily</span> to set font
</li>
<li> note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.
</li>
<li> note: all objects will be removed -after a javascript confirm box- when clicked on an object point with middle or right mouse button (e.g. event.button != 1: all buttons but left)
</li>
<li> use a prefix <a href='#filled'>filled</a> or <span class="wims_emph">f</span> to set fillable objects filled. (fcircles,filledcircles etc)<br/> in case of <span class="wims_emph">fillpattern</span> do not use the <span class="wims_emph">f</span> prefix !
</li>
<li> for non solid filling, use command <a href="#fillpattern">fillpattern grid,hatch,diamond,dot</a>
</li>
<li> use <a href='#opacity'>opacity int,int</a> and <a href='#fillcolor'>fillcolor color</a> to trigger coloured filling of fillable objects
</li>
<li> use command <span class="wims_emph">dashed</span> and/or <span class="wims_emph">dashtype int,int</span> to trigger dashing
</li>
<li> use command <span class="wims_emph">replyformat int</span> to control / adjust output formatting of javascript function read_canvas(); (the defaults should be fine...)
</li>
<li> may be combined with onclick or drag xy of other components of flyscript objects (although not very useful...)
</li>
<li> may be combined with keyword <a href='#userinput_xy'>userinput_xy</a>
</li>
<li> may be combined width the <a href='#snaptogrid'>snaptogrid snaptopoints </a> etc, to simplify the checking of the student reply
</li>
<li> the cursor may be appropriately styled using command <a href='cursor'>cursor</a>
</li>
<li> 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...
</li>
<li> note: the default replyformat for <span class="wims_emph">userdraw input(s),color</span> used format x1;y1;text1 n x2;y2;test2 n x_n;y_n;text_n (e.g. it is not a comma separated array...use <span class="wims_emph">direct exec</span> to test)
</li>
<li> note: a special case is <span class="wims_emph">userdraw image,boguscolor</span>. Images (bitmap or svg or div) present in the exercise page and the img/svg/div-tag with an unique 'id' and <code>onclick='javascript:place_image_on_canvas(this.id)'</code> can be placed onto the canvas.<br>The <span class="wims_emph">id</span> and (x;y) coordinates will be returned using read_canvas();<br> native MathML, MathJax or KaTeX typesetting may be included in div's.(experiments; wims_modules svn version only!)
</li>
<li> note: command <br><code>userdraw function,color</code> is identical to acombination of <code>strokecolor color</code> and <code>userinput function</code><br>
</li>
<li> note: commands :<br><code>multicolors red,green,blue<br>multilabel f(x)=:g(x)=:h(x)=<br>userdraw functions3,color</code><br>is identical to commands :<br><code>functionlabel f(x)=:p(x)=:w(x)=<br/>strokecolor red<br>userinput function <br>strokecolor green<br>userinput function <br>strokecolor blue<br>userinput function</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_canvastype_a $wims_name_Example: userdraw_canvastype_a
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_canvastype_b $wims_name_Example: userdraw_canvastype_b
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_rect $wims_name_Example: userdraw_rect
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_rects $wims_name_Example: userdraw_rects
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_frect $wims_name_Example: userdraw_frect
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_frects $wims_name_Example: userdraw_frects
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_roundrect $wims_name_Example: userdraw_roundrect
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_roundrects $wims_name_Example: userdraw_roundrects
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_froundrect $wims_name_Example: userdraw_froundrect
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_froundrects $wims_name_Example: userdraw_froundrects
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_line $wims_name_Example: userdraw_line
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_lines $wims_name_Example: userdraw_lines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_vline $wims_name_Example: userdraw_vline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_vlines $wims_name_Example: userdraw_vlines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_hline $wims_name_Example: userdraw_hline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_hlines $wims_name_Example: userdraw_hlines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_demiline $wims_name_Example: userdraw_demiline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_demilines $wims_name_Example: userdraw_demilines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arc $wims_name_Example: userdraw_arc
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arcs $wims_name_Example: userdraw_arcs
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_point $wims_name_Example: userdraw_point
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_points $wims_name_Example: userdraw_points
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arrow $wims_name_Example: userdraw_arrow
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arrows $wims_name_Example: userdraw_arrows
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arrow2 $wims_name_Example: userdraw_arrow2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_arrows2 $wims_name_Example: userdraw_arrows2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_curvedarrow $wims_name_Example: userdraw_curvedarrow
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_curvedarrows $wims_name_Example: userdraw_curvedarrows
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_curvedarrow2 $wims_name_Example: userdraw_curvedarrow2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_curvedarrows2 $wims_name_Example: userdraw_curvedarrows2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_crosshair $wims_name_Example: userdraw_crosshair
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_crosshairs $wims_name_Example: userdraw_crosshairs
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_circle $wims_name_Example: userdraw_circle
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_circles $wims_name_Example: userdraw_circles
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_segment $wims_name_Example: userdraw_segment
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_segments $wims_name_Example: userdraw_segments
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_line $wims_name_Example: userdraw_line
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_lines $wims_name_Example: userdraw_lines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_triangle $wims_name_Example: userdraw_triangle
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_poly5 $wims_name_Example: userdraw_poly5
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_filled_poly5 $wims_name_Example: userdraw_filled_poly5
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_poly7 $wims_name_Example: userdraw_poly7
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_filled_poly7 $wims_name_Example: userdraw_filled_poly7
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_polyline $wims_name_Example: userdraw_polyline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_freehandline $wims_name_Example: userdraw_freehandline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_filled_freehandline $wims_name_Example: userdraw_filled_freehandline
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_freehandlines $wims_name_Example: userdraw_freehandlines
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_input $wims_name_Example: userdraw_input
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_inputs $wims_name_Example: userdraw_inputs
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_text $wims_name_Example: userdraw_text
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_function $wims_name_Example: userdraw_function
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_clickfill_colorpalette $wims_name_Example: userdraw_clickfill_colorpalette
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_clickfill_1 $wims_name_Example: userdraw_clickfill_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_clickfill_2 $wims_name_Example: userdraw_clickfill_2
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userdraw_clickfill_2 $wims_name_Example: userdraw_clickfill_2
      
</li>
</ul>
<h3 id='userinput'>userinput <a href='#userinput_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userinput function inputfield</code>
        <ul>
<li><span>alternative command: <a id='userinput_function' href='#userinput_function_top'><code>userinput_function</code></a></span></li>
<li><span>alternative command: <a id='userinput_xy' href='#userinput_xy_top'><code>userinput_xy</code></a></span></li>
<li> <span class="wims_emph">inputfield</span> is only usable in combination with some <span class="wims_emph">userdraw draw_type</span>
</li>
<li> note: the input fields are not cleared after the object is drawn...be aware of multiple idential drawings (many clicks on the <span class="wims_emph">ok</span> button)
</li>
<li> <span class="wims_emph">userinput function</span> may be used any time (e.g. without userdraw)
</li>
<li> multiple <span class="wims_emph">userinput function</span> commands may be used.
</li>
<li> use command <code>functionlabel some_string</code> to define the inputfield text: default value "f(x)="
</li>
<li> use command <code>strokecolor some_color</code> to adjust the plot / functionlabel color
</li>
<li> use command <code>css some_css</code> to adjust the inputfields
</li>
<li> use command <code>fontsize int</code> to adjust the label fonts. (default 12px)
</li>
<li> the user input for the function will be corrected by a simple <span class="wims_emph">rawmath</span> implementation...<br>an error message will be shown if javascript can not interpret the user input
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_function $wims_name_Example: userinput_function
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_points $wims_name_Example: userinput_points
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_arrows $wims_name_Example: userinput_arrows
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_combined $wims_name_Example: userinput_combined
      
</li>
</ul>
<h3 id='userinput_xy'>userinput_xy <a href='#userinput_xy_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userinput_xy</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> to be used in combination with command "userdraw object_type,color"
</li>
<li> 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)
</li>
<li> the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
</li>
<li> 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 <span class="wims_emph">protected</span> against code injection.
</li>
<li> can <b>not</b> be combined with command <span class="wims_emph">intooltip tiptext</span> <br>note: the <span class="wims_emph">tooltip div element</span> is used for placing inputfields
</li>
<li> user drawings will not zoom on zooming (or pan on panning)
</li>
<li> use command <span class="wims_emph">css some_css</span> to adjust the inputarea.
</li>
<li> use command <span class="wims_emph">fontsize int</span> to adjust the text labels (if needed)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_xy $wims_name_Example: userinput_xy
      
</li>
</ul>
<h3 id='userinput_function'>userinput_function <a href='#userinput_function_top' title='return at the command list'>&#8593;</a></h3>
        <code>  userinput_function</code>
        <ul>
<li><span>alternative command: <a id='userinput' href='#userinput_top'><code>userinput</code></a></span></li>
<li> keyword (no arguments required)
</li>
<li> if set, a inputfield will be added to the page
</li>
<li> repeat keyword for more function input fields
</li>
<li> the userinput value will be plotted in the canvas
</li>
<li> this value may be read with <code>read_canvas()</code>. <br>for do it yourself js-scripters: If this is the first inputfield in the script, its id is canvas_input0
</li>
<li> use before this command <span class="wims_emph">userinput_function</span>,<br>commands like <span class="wims_emph">css some_css</span>, <span class="wims_emph">xlabel some_description</span>, <span class="wims_emph">opacity int,int</span>, <span class="wims_emph">linewidth int</span>, <span class="wims_emph">dashed</span> and <span class="wims_emph">dashtype int,int</span> to modify
</li>
<li> fontsize can be set using command <span class="wims_emph">fontsize int</span>
</li>
<li> incompatible with command <span class="wims_emph">intooltip link_text_or_image</span>: it uses the tooltip div for adding the inputfield
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,userinput_function $wims_name_Example: userinput_function
      
</li>
</ul>
<h3 id='vline'>vline <a href='#vline_top' title='return at the command list'>&#8593;</a></h3>
        <code>  vline x,y,color</code>
        <ul>
<li><span>alternative command: <a id='verticalline' href='#verticalline_top'><code>verticalline</code></a></span></li>
<li> draw a vertical line through point (x:y) in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,vline $wims_name_Example: vline
      
</li>
</ul>
<h3 id='vlines'>vlines <a href='#vlines_top' title='return at the command list'>&#8593;</a></h3>
        <code>  vlines color,x1,y1,x2,y2....</code>
        <ul>
<li><span>alternative command: <a id='verticallines' href='#verticallines_top'><code>verticallines</code></a></span></li>
<li> draw vertical lines through points (x1:y1),(x2:y2)... in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,vlines $wims_name_Example: vlines
      
</li>
</ul>
<h3 id='video'>video <a href='#video_top' title='return at the command list'>&#8593;</a></h3>
        <code>  video x,y,w,h,videofile location</code>
        <ul>
<li> x,y: left top corner of audio element (in xrange / yrange)
</li>
<li> w,y: width and height in pixels
</li>
<li> video format may be in *.mp4 (todo: other formats)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,video $wims_name_Example: video
      
</li>
</ul>
<h3 id='xaxis'>xaxis <a href='#xaxis_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</code>
        <ul>
<li><span>alternative command: <a id='xaxistext' href='#xaxistext_top'><code>xaxistext</code></a></span></li>
<li> usable for commands <a href="#numberline">numberline</a> and <a href="#grid">grid</a> or combinations thereof
</li>
<li> use these x-axis num1...num_n values instead of default xmin...xmax
</li>
<li> in case of command <span class="wims_emph">grid</span>. there is no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
</li>
<li> use command <span class="wims_emph">fontcolor</span>, <span class="wims_emph">fontfamily</span> to adjust font <br>defaults: black,12,Arial<br>note: command <span class="wims_emph">fontsize</span> is not active for this command.(<span class="wims_emph">fontsize</span> can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> if the <span class="wims_emph">x-axis words</span> are too big and will overlap, a simple alternating offset will be applied
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li> <span class="wims_emph">xmajor</span> steps should be synchronised with numbers eg. <span class="wims_emph">1</span> in the next example <code>grid 1,100,grey,1,4,6,grey</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xaxistext $wims_name_Example: xaxistext
      
</li>
</ul>
<h3 id='xaxisup'>xaxisup <a href='#xaxisup_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</code>
        <ul>
<li><span>alternative command: <a id='xaxistextup' href='#xaxistextup_top'><code>xaxistextup</code></a></span></li>
<li> the text will be rotated 90&deg; up
</li>
<li> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
</li>
<li> use these x-axis num1...num_n values instead of default xmin...xmax
</li>
<li> use command <span class="wims_emph">fontcolor</span>, <a href="#fontfamily">fontfamily</a> to adjust font <br>defaults: black,12,Arial<br>note: command <span class="wims_emph">fontsize</span> is not active for this command.(<span class="wims_emph">fontsize</span> can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> if the <span class="wims_emph">x-axis words</span> are too big, they will overlap the graph<br> (in this case the text will start from ysize upwards)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li><span class="wims_emph">xmajor</span> steps should be synchronised with numbers eg. "1" in the next example <code>grid 1,100,grey,1,4,6,grey</code>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xaxistextup $wims_name_Example: xaxistextup
      
</li>
</ul>
<h3 id='xerrorbars'>xerrorbars <a href='#xerrorbars_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</code>
        <ul>
<li> 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'
</li>
<li> the errors E1 and E2 values are in xrange.
</li>
<li> use command <span class="wims_emph">linewidth int</span> to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xerrorbars $wims_name_Example: xerrorbars
      
</li>
</ul>
<h3 id='newrange'>newrange <a href='#newrange_top' title='return at the command list'>&#8593;</a></h3>
        <code>  newrange xmin,xmax,ymin,ymax</code>
        <ul>
<li> objects defined after command will make use of this new range
</li>
<li> https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe
</li>
</ul>
<h3 id='xrange'>xrange <a href='#xrange_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xrange xmin,xmax</code>
        <ul>
<li><span>alternative command: <a id='rangex' href='#rangex_top'><code>rangex</code></a></span></li>
<li> if not given: 0,xsize (eg in pixels)
</li>
</ul>
<h3 id='xsnaptogrid'>xsnaptogrid <a href='#xsnaptogrid_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xsnaptogrid</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command <span class="wims_emph">drag x|y|xy</span>) will snap to the given x-grid values when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to xmajor grid
</li>
<li> if no grid is defined, points will snap to every integer xrange value. (eg snap_x=1)
</li>
<li> if you do not want a visible grid, but you only want a <span class="wims_emph">snaptogrid</span> with some value...define this grid with opacity 0.
</li>
<li> if xminor is defined (use keyword <span class="wims_emph">axis</span> to activate xminor), the drawing will snap to xminor <br>use only even dividers in x-minor...for example<br><code>xsnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><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>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xsnaptogrid_1 $wims_name_Example: xsnaptogrid_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xsnaptogrid_2 $wims_name_Example: xsnaptogrid_2
      
</li>
</ul>
<h3 id='xoffset'>xoffset <a href='#xoffset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xoffset</code>
        <ul>
<li> keyword ; to place the text centered above the text coordinates(x:y) ...
</li>
<li> may be used for points or other things requiring centered labels
</li>
<li> use <a href="#fontfamily">fontfamily</a> for setting the font
</li>
<li> 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)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xoffset $wims_name_Example: xoffset
      
</li>
</ul>
<h3 id='xyoffset'>xyoffset <a href='#xyoffset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xyoffset</code>
        <ul>
<li> keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
</li>
<li> may be used for points or other things requiring labels
</li>
<li> use <a href="#fontfamily">fontfamily</a> for setting the font
</li>
<li> only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
</li>
<li> in case of inputfields the inputfield will be centered x and y on its coordinates.<br>for example:<br>inputs 1,1,10,? <br>point 1,1,red <br> the point will be completely invisible<br>note: keyword <span class="wims_emph">xyoffset</span> will also provide centering if used with <a href='#userdraw'>input(s),color</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xyoffset $wims_name_Example: xyoffset
      
</li>
</ul>
<h3 id='xunit'>xunit <a href='#xunit_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xunit some_unit_for_x-values</code>
        <ul>
<li> unicode allowed (no html code)
</li>
<li> use together with command <a href="#display">display or mouse</a>
</li>
<li> will display the cursor x-coordinate in <span class="wims_emph">unit</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xunit $wims_name_Example: xunit
      
</li>
</ul>
<h3 id='xlabel'>xlabel <a href='#xlabel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xlabel some_string</code>
        <ul>
<li> will be used to create a label for the x-axis (label is in quadrant I)
</li>
<li> can only be used together with command <span class="wims_emph">grid</span><br>not depending on keywords <span class="wims_emph">axis</span> and <span class="wims_emph">axisnumbering</span>
</li>
<li> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command <span class="wims_emph">fontsize</span> to adjust.<br>(command <span class="wims_emph">fontfamily</span> is not active for this command)
</li>
<li> use <a href="#ylabel">ylabel</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xlabel $wims_name_Example: xlabel
      
</li>
</ul>
<h3 id='xlogbase'>xlogbase <a href='#xlogbase_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xlogbase number</code>
        <ul>
<li> sets the logbase number for the x-axis
</li>
<li> default value 10
</li>
<li> use together with commands xlogscale / xylogscale
</li>
</ul>
<h3 id='xlogscale'>xlogscale <a href='#xlogscale_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xlogscale ymajor,yminor,majorcolor,minorcolor</code>
        <ul>
<li> the x/y-range are set using commands <code>xrange xmin,xmax</code> and <code>yrange ymin,ymax</code>
</li>
<li> ymajor is the major step on the y-axis; yminor is the divisor for the y-step
</li>
<li> the linewidth is set using command <span class="wims_emph">linewidth int</span>
</li>
<li> the opacity of major / minor grid lines is set by command <a href='#opacity'>opacity</a>
</li>
<li> default logbase number = 10 ... when needed, set the logbase number with command <span class="wims_emph">xlogbase number</span>
</li>
<li> the x/y- axis numbering is triggered by keyword <span class="wims_emph">axisnumbering</span><ul><li>use command <span class="wims_emph">precision</span> before <span class="wims_emph">xlogscale</span> command to set the precision (decimals) of the axis numbering</li><li>use commands <span class="wims_emph">xlabel some_text</span> and/or <span class="wims_emph">ylabel some_text</span> for text on axis: use command <span class="wims_emph">fontsize int</span> to set the fontsize (default 12px)</li><li>use command <span class="wims_emph">fontfamily fnt_family_string</span> to set the fonts for axis-numbering</li><li>use command <span class="wims_emph">fontcolor</span> to set the colour</li></ul>
</li>
<li> note: the complete canvas will be used for the <span class="wims_emph">log paper</span>
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command <span class="wims_emph">mouse color,fontsize</span> will show the real values in the logpaper.<br> <li> note: when using something like <span class="wims_emph">xrange 0.0001,0.01</span>...combined with commands <a href='#mouse'>mouse</a> and/or <a href='#userdraw'>userdraw</a>...<br> make sure the <a href='#precision'>precision</a> is set accordingly
</li>
<li> note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy !
</li>
<li> <b>attention</b>: keyword <span class="wims_emph">snaptogrid</span> may not lead to the desired result...
</li>
<li> <b>attention</b>: do not use command <span class="wims_emph">zoom</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xlogscale $wims_name_Example: xlogscale
      
</li>
</ul>
<h3 id='xylogscale'>xylogscale <a href='#xylogscale_top' title='return at the command list'>&#8593;</a></h3>
        <code>  xylogscale majorcolor,minorcolor</code>
        <ul>
<li> the x/y-range are set using commands <span class="wims_emph">xrange xmin,xmax</span> and <span class="wims_emph">yrange ymin,ymax</span>
</li>
<li> the linewidth is set using command <span class="wims_emph">linewidth int</span>
</li>
<li> the opacity of major / minor grid lines is set by command <span class="wims_emph">opacity [0-255],[0-255]</span>
</li>
<li> default logbase number = 10 ... when needed, set the logbase number with command <span class="wims_emph">xlogbase number</span> and/or <span class="wims_emph">ylogbase number</span>
</li>
<li> the x/y- axis numbering is triggered by keyword <span class="wims_emph">axisnumbering</span><ul><li>use commands <span class="wims_emph">xlabel some_text</span> and/or <span class="wims_emph">ylabel some_text</span> for text on axis: use command <span class="wims_emph">fontsize int</span> to set the fontsize (default 12px)</li><li>use command <span class="wims_emph">fontfamily fnt_family_string</span> to set the fonts for axis-numbering</li><li>use command <span class="wims_emph">fontcolor</span> to set the colour</li></ul>
</li>
<li> note: the complete canvas will be used for the <span class="wims_emph">log paper</span>
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command <span class="wims_emph">mouse color,fontsize</span> will show the real values in the logpaper.<br> <li> note: when using something like <span class="wims_emph">yrange 0.0001,0.01</span>...combined with commands <span class="wims_emph">mouse color,fontsize</span> and/or <span class="wims_emph">userdraw type,color</span>...<br> make sure the precision is set accordingly (eg command <span class="wims_emph">precision 10000</span>)
</li>
<li> note: in case of userdraw, the use of keyword <span class="wims_emph">userinput_xy</span> may be handy !
</li>
<li> <b>attention</b>: keyword <span class="wims_emph">snaptogrid</span> may not lead to the desired result...
</li>
<li> <b>attention</b>: do not use command <span class="wims_emph">zoom</span>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,xylogscale $wims_name_Example: xylogscale
      
</li>
</ul>
<h3 id='yaxis'>yaxis <a href='#yaxis_top' title='return at the command list'>&#8593;</a></h3>
        <code>  yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</code>
        <ul>
<li><span>alternative command: <a id='yaxistext' href='#yaxistext_top'><code>yaxistext</code></a></span></li>
<li> use command <span class="wims_emph">fontcolor</span>, <span class="wims_emph">fontfamily</span> to adjust font <br>defaults: black,12,Arial<br> note: command <span class="wims_emph">fontsize</span> is not active for this command.(<span class="wims_emph">fontsize</span> can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
</li>
<li> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
</li>
<li> use these y-axis num1...num_n values instead of default ymin...ymax
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,yaxistext $wims_name_Example: yaxistext
      
</li>
</ul>
<h3 id='yerrorbars'>yerrorbars <a href='#yerrorbars_top' title='return at the command list'>&#8593;</a></h3>
        <code>  yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</code>
        <ul>
<li> draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
</li>
<li> the errors E1 and E2 values are in yrange.
</li>
<li> use command <span class="wims_emph">linewidth int</span> to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,yerrorbars $wims_name_Example: yerrorbars
      
</li>
</ul>
<h3 id='yoffset'>yoffset <a href='#yoffset_top' title='return at the command list'>&#8593;</a></h3>
        <code>  yoffset</code>
        <ul>
<li> keyword; to place the text centered above the text coordinates(x:y) ...
</li>
<li> may be used for points or other things requiring centered labels
</li>
<li> use <a href="#fontfamily">fontfamily</a> for setting the font
</li>
<li> 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)
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,yoffset $wims_name_Example: yoffset
      
</li>
</ul>
<h3 id='yrange'>yrange <a href='#yrange_top' title='return at the command list'>&#8593;</a></h3>
        <code>  yrange ymin,ymax</code>
        <ul>
<li><span>alternative command: <a id='rangey' href='#rangey_top'><code>rangey</code></a></span></li>
<li> if not given 0,ysize (eg in pixels)
</li>
</ul>
<h3 id='ysnaptogrid'>ysnaptogrid <a href='#ysnaptogrid_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ysnaptogrid</code>
        <ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command <span class="wims_emph">drag x|y|xy</span>) will snap to the given y-grid values when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to ymajor grid
</li>
<li> if no grid is defined, points will snap to every integer yrange value. (eg snap_y=1)
</li>
<li> if you do not want a visible grid, but you only want a <span class="wims_emph">snaptogrid</span> with some value...define this grid with opacity 0.
</li>
<li> if yminor is defined (use keyword <span class="wims_emph">axis</span> to activate yminor), the drawing will snap to yminor <br>use only even dividers in y-minor...for example<br><code>ysnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><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>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ysnaptogrid_1 $wims_name_Example: ysnaptogrid_1
      

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ysnaptogrid_2 $wims_name_Example: ysnaptogrid_2
      
</li>
</ul>
<h3 id='ylabel'>ylabel <a href='#ylabel_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ylabel some_string</code>
        <ul>
<li> will be used to create a (vertical) label for the y-axis (label is in quadrant I)
</li>
<li> can only be used together with command <a href="#grid">grid</a><br>not depending on keywords <span class="wims_emph">axis</span> and <span class="wims_emph">axisnumbering</span>
</li>
<li> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command <span class="wims_emph">fontsize</span> to adjust (command <span class="wims_emph">fontsize</span> is not active for this command)
</li>
<li> use <a href="#xlabel">xlabel</a>
</li>
<li>

      !set wims_ref_class=wims_button
      !href cmd=help&special_parm=canvas_examples,ylabel $wims_name_Example: ylabel
      
</li>
</ul>
<h3 id='ylogbase'>ylogbase <a href='#ylogbase_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ylogbase number</code>
        <ul>
<li> sets the logbase number for the y-axis
</li>
<li> default value 10
</li>
<li> use together with commands ylogscale / xylogscale
</li>
</ul>
<h3 id='ylogscale'>ylogscale <a href='#ylogscale_top' title='return at the command list'>&#8593;</a></h3>
        <code>  ylogscale xmajor,xminor,majorcolor,minorcolor</code>
        <ul>
<li> the x/y-range are set using commands <span class="wims_emph">xrange xmin,xmax</span> and <span class="wims_emph">yrange ymin,ymax</span>
</li>
<li> xmajor is the major step on the x-axis; xminor is the divisor for the x-step
</li>
<li> the linewidth is set using command <span class="wims_emph">linewidth int</span>
</li>
<li> the opacity of major / minor grid lines is set by command <span class="wims_emph">opacity [0-255],[0-255]</span>
</li>
<li> default logbase number = 10 ... when needed, set the logbase number with command <span class="wims_emph">ylogbase number</span>
</li>
<li> the x/y- axis numbering is triggered by keyword <span class="wims_emph">axisnumbering</span><ul><li>use command <span class="wims_emph">precision</span> before <span class="wims_emph">ylogscale</span> command to set the precision (decimals) of the axis numbering</li><li>use commands <span class="wims_emph">xlabel some_text</span> and/or <span class="wims_emph">ylabel some_text</span> for text on axis: use command <span class="wims_emph">fontsize int</span> to set the fontsize (default 12px)</li><li>use command <span class="wims_emph">fontfamily fnt_family_string</span> to set the fonts for axis-numbering</li><li>use command <span class="wims_emph">fontcolor</span> to set the color</li></ul>
</li>
<li> note: the complete canvas will be used for the <span class="wims_emph">log paper</span>
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command <span class="wims_emph">mouse color,fontsize</span> will show the real values in the logpaper.<br> <li> note: when using something like <span class="wims_emph">yrange 0.0001,0.01</span>...combined with commands <span class="wims_emph">mouse color,fontsize</span> and/or <span class="wims_emph">userdraw type,color</span>...<br> make sure the precision is set accordingly (eg command <span class="wims_emph">precision 10000</span>)
</li>
<li> note: in case of userdraw, the use of keyword <span class="wims_emph">userinput_xy</span> may be handy !
</li>
<li> <b>attention</b>: do not use command <span class="wims_emph">zoom</span>
</li>
<li> <b>attention</b>: keyword <span class="wims_emph">snaptogrid</span> may not lead to the desired result...
</li>
</ul>
<h3 id='yunit'>yunit <a href='#yunit_top' title='return at the command list'>&#8593;</a></h3>
        <code>  yunit some_unit_for_y-values</code>
        <ul>
<li> unicode allowed (no html code)
</li>
<li> use together with command mousey
</li>
<li> will display the cursor y-coordinate in <span class="wims_emph">unit</span>
</li>
</ul>
<h3 id='zoom'>zoom <a href='#zoom_top' title='return at the command list'>&#8593;</a></h3>
        <code>  zoom button_color</code>
        <ul>
<li> introduce a very small <span class="wims_emph">controlpanel</span> at the lower right corner (font size of the panel is fixed to: 22px Arial)
</li>
<li> giving six 15&times;15px <span class="wims_emph">active</span> rectangle areas<br>(<span class="wims_emph">&times;,&darr;,&uarr;,&larr;,&rarr;,&minus;,+</span>) for zooming and/or panning of the image
</li>
<li> a mouse wheel is active for in/out zooming. Drag panning is not supported (this will conflict with many <span class="wims_emph">userdraw</span> or <span class="wims_emph">multidraw</span> primitives)
</li>
<li> the <span class="wims_emph">controlpanel</span> is not active for a <span class="wims_emph">userdraw</span> mousedown (but it can interfere with some <span class="wims_emph">userdraw</span> types)
</li>
<li> the <span class="wims_emph">&times;</span> symbol will reset to your original xmax/xmin ymax/ymin values.
</li>
<li> choose an appropriate color, so the small <span class="wims_emph">&times;,&darr;,&uarr;,&larr;,&rarr;,&minus;,+</span> are clearly visible
</li>
<li> command <span class="wims_emph">opacity</span> may be used to set stroke_opacity of buttons
</li>
<li> note: on zooming, text will not increase / decrease the font size (todo??)
</li>
<li> note: adding <span class="wims_emph">zooming</span> will increase the size of the javascript include with approx. 11 kb
</li>
</ul>

<script>
 var keys = ['canvasdraw' ,'canvasdraw','affine','duplicates','angle','animate','arc','arrowarc','arcarrow','arrow','vector','arrows','vectors','arrow2','arrows2','arrowhead','audio','axisnumbering','axis','barchart','bezier','bgcolor','bgimage','blink','boxplot','boxplotdata','canvastype','centered','centerstring','circle','disk','circles','disks','clearbutton','delete','erase','clock','colorpalette','copy','copyresized','crosshair','crosshairs','crosshairsize','css','cursor','pointer','curve','plot','curvedarrow','curvedarrow2','curvedarrows','curvedarrows2','dashed','dashtype','diamondfill','dotfill','drag','ellipse','ellipses','fillall','filled','fillcolor','fillpattern','settileimage_url','filltoborder','floodfill','fill','fontcolor','fontfamily','fontsize','functionlabel','functionlabels','grid','gridfill','group','demiline','halfline','demilines','halflines','hatchfill','hline','horizontalline','hlines','horizontallines','http','html','imagefill','imagepalette','input','intooltip','jscurve','jsplot','jsmath','kill','killaffine','killlinear','killrotate','killslider','killtranslation','killtranslate','latex','math','lattice','linear','line','lines','linewidth','levelcurve','legend','legendcolors','linegraph','mathml','mouse','mouse_degree','display','precision','mousex','mousey','multidash','multidraw','multilabel','multilinewidth','multifill','multifillcolors','multifillopacity','multisnaptogrid','multisnap','multistrokecolors','multistrokeopacity','multiuserinput','multiinput','noreset','killreset','noxaxis','noyaxis','numberline','obabel','opacity','transparent','onclick','parallel','plotsteps','point','points','poly','polyline','popup','protractor','pixels','pixelsize','piechart','range','rays','rect','rects','replyformat','roundrect','roundrects','ruler','reset','resetoffset','rotate','rotationcenter','size','segment','seg','segments','segs','setlimits','setpixel','slider','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_xy','userinput_xy','userinput_function','userinput','vline','verticalline','vlines','verticallines','video','xaxis','xaxistext','xaxisup','xaxistextup','xerrorbars','newrange','xrange','rangex','xsnaptogrid','xoffset','xyoffset','xunit','xlabel','xlogbase','xlogscale','xylogscale','yaxis','yaxistext','yerrorbars','yoffset','yrange','rangey','ysnaptogrid','ylabel','ylogbase','ylogscale','yunit','zoom'];
 var keys_len = keys.length;
 function match(s1,s2){
    var n1 = s1.length;
    if(n1 < 3){return 0;}
    var n2 = s2.length;
    var c1,c2,found;
    var count = n1 - Math.abs(n1 - n2);
    for(var p = 0;p < n1;p++){
      c1=s1.charAt(p);
      found = false;
      for(var i = 0;i < n2;i++){
        c2 = s2.charAt(i);
        if(c1 == c2){found = true;count = count + n1 - Math.abs(p - i);}
      };
      if(! found ){count = count - n2;}
    };
    return count;
 };
 function look(){
  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;
  for(var p = 0; p < keys_len ; p++){
    ss = keys[p];
    if( s == ss ){
      document.getElementById(s).scrollIntoView({behavior: "smooth", block: "center"});
      return;
    };
    /* not ok? ... try to find a match for a reasonable typo... */
    tmp = match(s,ss);
    if(tmp > next_idx){
     next_idx = tmp;
     next_best = p;
    };
  };
  if(next_best != -1 ){
    typo = keys[next_best];
    if(confirm('"'+s+'" is not a valid canvasdraw command. Did you mean "'+typo+'" ?')){
      document.getElementById(typo).scrollIntoView({behavior: "smooth", block: "center"});
      return;
    };
  }
  else{
    alert(s+' is not a valid canvasdraw command');
  };
  return;
 };
</script>