Creating geometric elements
From JSXGraph Wiki
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
board.createElement('point', [1,3], {name:'A', strokecolor:'red'});
Another example:
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});
The parameters of createElement() are:
board.createElement(elementType, parentElements, attributes);
where
- elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
- primitive elements:
- angle
 - arc
 - arrow
 - circle
 - curve
 - group
 - line
 - point
 - polygon
 - sector
 - text
 - transform
 
 - composite elements:
- arrowparallel
 - bisector
 - circumcircle
 - circumcirclemidpoint
 - integral
 - midpoint
 - mirrorpoint
 - normal
 - parallel
 - parallelpoint
 - perpendicular
 - perpendicularpoint
 - reflection
 
 
 - primitive elements:
 - parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.
 - attributes is a JavaScript object. Usually it is given in the "literal object" form
 
{key1:value1, key2:value2, ...}
- Properties of a point:
- style
 - strokeColor
 - strokeWidth
 - fillColor
 - highlightStrokeColor
 - highlightFillColor
 - labelColor
 - visible
 - fixed
 - draft
 - trace
 
 - Additional properties of a line:
- straightFirst
 - straightLast
 
 
There are no additional properties of a circle
- Additional properties for an element:
- needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming
 
 - Possible parameters:
 
el.setProperty('key1:value1','key2:value2',...);
el.setProperty([key1:value1],[key2:value2],...);
el.setProperty({key1:value1, key2:value2},...);