Approximating an answer to the Quarter Tank Problem http://mathworld.wolfram.com/Quarter-TankProblem.html

index.html

<canvas></canvas>
<style>canvas{background:#ddd;}</style>
<script>

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var step = 0.01;
var pctx = 0.50;
var pcty = 0.06;
canvas.width = canvas.height = 400;

function heightToArea (h) {
  var rad = h * Math.PI * 2;
	return (rad - Math.sin(rad)) / (Math.PI * 2);
}

function areaToHeight (h) {
	if (h > 0.5) {
		h = h * h;
	}
	return h;
}

ctx.moveTo(0, 0);
for (var i = 0; i < 1 + step; i+= step) {
	var x = canvas.width * i;
	var y = canvas.height * heightToArea(i);
	ctx.lineTo(x, y);
}
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.moveTo(0, 0);
ctx.bezierCurveTo(
	canvas.width * pctx,      -canvas.height * pcty,
	canvas.width * (1 - pctx), canvas.height * (pcty + 1),
	canvas.width, canvas.height
);
ctx.stroke();

</script>