From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Circle through two points

One possibility to construct a circle is to give its center and a point defining its radius. Lets construct two points "A" and "B".

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});

Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.

var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.

var ci2 = b.create('circle',[p1,p2], 
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});

Dynamic fill-opacity

We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2".

var ci3 = b.create('circle',[p1,p2], 
    {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });