# Difference between revisions of "Shade region bounded by curves"

Somewhere in the WWW the question was asked how to shade the region bounded by the following curves, where $x\ge 0$:

$\begin{eqnarray*} x & \mapsto & \sqrt{x^2-1} \\ x & \mapsto & 0.707 x \\ x & \mapsto & 0 \\ \end{eqnarray*}$

Here is the solution:

### The underlying JavaScript code

const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-1, 2, 2, -1], axis:true
});

// 1. step: compute intersection of 'sqrt(x^2-1)' and '0.707*x'
var diff = x => Math.sqrt(x * x - 1) -  0.707 * x;
var x_intersect = JXG.Math.Numerics.root(diff, 1.5);

// 2. step: plot curves only up to the mutual intersections
// We use JessieCode for the function terms
var curve1 = board.create('functiongraph', ['0', 0, 1]);
var curve2 = board.create('functiongraph', ['sqrt(x^2-1)', 1, x_intersect]);
var curve3 = board.create('functiongraph', ['0.707*x', 0, x_intersect]);

// 3. step: plot a filled curve which starts at (0,0), contains all points of 'sqrt(x^2-1)'
// and is closed by adding (0,0) at the end.
var curve = board.create('curve', [[], []], {strokeWidth:3, fillColor:'yellow', fillOpacity: 0.3});
curve.updateDataArray = function() {