Fill the intersection area of three circles
From JSXGraph Wiki
The underlying JavaScript code
JXG.joinCurves = function(board, parents, attributes) {
var curves = parents,
attr = JXG.copyAttributes(attributes, board.options, 'curve'),
c = board.create('curve', [[0], [0]], attr);
c.updateDataArray = function() {
var i, le = curves.length;
// The paths have to be connected
this.dataX = [];
this.dataY = [];
for (i = 0; i < le; i++) {
if (i < le - 1) {
this.dataX = this.dataX.concat(curves[i].dataX.slice(0,-1));
this.dataY = this.dataY.concat(curves[i].dataY.slice(0,-1));
} else {
this.dataX = this.dataX.concat(curves[i].dataX);
this.dataY = this.dataY.concat(curves[i].dataY);
}
}
if (this.dataX.length<4) {
this.bezierDegree = 1;
} else {
this.bezierDegree = curves[0].bezierDegree;
}
};
c.prepareUpdate().update().updateVisibility().updateRenderer();
return c;
};
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,5,5,-1], axis:true});
// Create two arcs (or circles)
var p1 = brd.create('point', [1,1]);
var p2 = brd.create('point', [3,0]);
var a1 = brd.create('circle', [p1,p2]);
var p3 = brd.create('point', [4,1]);
var p4 = brd.create('point', [2,0]);
var a2 = brd.create('circle', [p3,p4]);
var p5 = brd.create('point', [2.5, 4.5]);
var p6 = brd.create('point', [-0.5, 4.5]);
var a3 = brd.create('circle', [p5,p6]);
// Create two intersection points
var i1 = brd.create('intersection', [a1,a2,1], {visible:true});
var i2 = brd.create('intersection', [a1,a3,0], {visible:true});
var i3 = brd.create('intersection', [a2,a3,1], {visible:true});
// Create three arcs surrounding the intersection area
var c1 = brd.create('arc', [p1, i2, i1], {visible:false});
var c2 = brd.create('arc', [p3, i1, i3], {visible:false});
var c3 = brd.create('arc', [p5, i3, i2], {visible:false});
// Join the three arcs and fill the area.
var c4 = JXG.joinCurves(brd, [c1, c2, c3],
{ strokeColor:'black',
strokeWidth:3,
fillColor:'yellow', fillOpacity:0.2
});