buttons

HTML

<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id='box' class='jxgbox'></div>

CSS

#box {
    width:500px;
    height:500px;
}

JavaScript

var prevPoint=null;
var getMouseCoords = function(e, i) {
        var cPos = board.getCoordsTopLeftCorner(e, i),
            absPos = JXG.getPosition(e, i),
            dx = absPos[0]-cPos[0],
            dy = absPos[1]-cPos[1];
 
        return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
    },
    down = function(e) {
        var canCreate = true, i, coords, el;
 
        if (e[JXG.touchProperty]) {
            // index of the finger that is used to extract the coordinates
            i = 0;
        }
        coords = getMouseCoords(e, i);
 
        for (el in board.objects) {
            if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                canCreate = false;
                break;
            }
        }
 
        if (canCreate) {

            var point=board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
             if(prevPoint==null){
                    prevPoint=point;
                    }
             else{
                board.create('line', [point,prevPoint]);
                prevPoint=null;
             }
            
        }
    },
    board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true});
 
    board.on('down', down);