Простой макет
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id='example' style='border-left:1px solid black; border-bottom:1px solid black'>Обновите браузер</canvas>
<input type="range" min="0" max="100" step="1" value="50">
<script>
function drawPlane(Y) {
var example = document.getElementById("example"),
ctx = example.getContext('2d');
example.height = 100;
example.width = 100;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(100, Y);
ctx.stroke();
}
document.querySelector('input[type=range]').oninput = function() {
drawPlane(100 - this.value);
}
drawPlane(50);
</script>
</body>
</html>
