View source for Fill the intersection area of two circles

<jsxgraph width="600" height="600">
    JXG.joinCurves = function(board, parents, attributes) {
        var cu1 = parents[0], 
            cu2 = parents[1],
            attr = JXG.copyAttributes(attributes, board.options, 'curve'),
            c = board.create('curve', [[0], [0]], attr);
        
        c.updateDataArray = function() {
            // The two paths have to be connected
            this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);
            this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);
            if (this.dataX.length<4) {
                this.bezierDegree = 1;
            } else {
                this.bezierDegree = cu1.bezierDegree;
            }
        };
        c.prepareUpdate().update().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]);

    // Create two intersection points
    var i1 = brd.create('intersection', [a1,a2,0], {visible:false});
    var i2 = brd.create('intersection', [a1,a2,1], {visible:false});

    // Create two arcs surrounding the intersection area
    var c1 = brd.create('arc', [p1, i1, i2], {visible:false});
    var c2 = brd.create('arc', [p3, i2, i1], {visible:false});

    // Join the two arcs and fill the area.
/*
    var c3 = JXG.joinCurves(brd, [c1,c2], 
        {   strokeColor:'black', 
            strokeWidth:3, 
            fillColor:'yellow', fillOpacity:0.2
        });
*/
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
    JXG.joinCurves = function(board, parents, attributes) {
        var cu1 = parents[0], 
            cu2 = parents[1],
            attr = JXG.copyAttributes(attributes, board.options, 'curve'),
            c = board.create('curve', [[0], [0]], attr);
        
        c.updateDataArray = function() {
            // The two paths have to be connected
            this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);
            this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);
            if (this.dataX.length<4) {
                this.bezierDegree = 1;
            } else {
                this.bezierDegree = cu1.bezierDegree;
            }
        };
        c.prepareUpdate().update().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]);

    // Create two intersection points
    var i1 = brd.create('intersection', [a1,a2,0], {visible:false});
    var i2 = brd.create('intersection', [a1,a2,1], {visible:false});

    // Create two arcs surrounding the intersection area
    var c1 = brd.create('arc', [p1, i1, i2], {visible:false});
    var c2 = brd.create('arc', [p3, i2, i1], {visible:false});

    // Join the two arcs and fill the area.
    var c3 = JXG.joinCurves(brd, [c1,c2], 
        {   strokeColor:'black', 
            strokeWidth:3, 
            fillColor:'yellow', fillOpacity:0.2
        });
</source>

[[Category:Geometry]]
[[Category:Examples]]