javascript - How can I shade sections of a JSXGraph board?

Question

I have a jsxgraph board set up with a few simple lines, like this:

I want to shade portions of it, for example, the white area between the blue line and the dotted line. What's the best way to go about this? I've looked in the API but none of the provided elements jumped out at me, and I haven't seen any examples so far that do what I'm trying to do. Is the Inequality element easily extendable to multiple lines?

Answer 1

You can use a polygon and hide the edges and vertices of the polygon. Here is an example:

    var board = JXG.JSXGraph.initBoard("jxgbox", {
        boundingbox: [-1, 5, 5, -1],
        axis: true
    });

    var p1 = board.create('point', [2, 1]);
    var shade = board.create('polygon', [p1, [0,p1.Y()], [0,4]],
            {
                borders: {visible: false},
                vertices: {visible: false}
            }
        );

If you need to intersect the coordinate axes, you can access them with board.defaultAxes.x and board.defaultAxes.y.