<html><head>
<script>
function DrawFn() {
var ctx = document.querySelector("canvas").getContext("2d");
var drawer = ctx.moveTo.bind(ctx);
var i, x0, x1, x2, x, y, el, fn, range;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for(i = 1; i <= 3; ++ i) {
el = document.getElementById("Fn" + i); // Обращаемся к одному из input-элементов
fn = el.value.split(/:/)[1]; // Выражение функции справа от двоеточия
range = el.value.split(/:/)[0].split(".."); // Интервал участка задаётся форматом "от..до" слева от двоеточия
x1 = parseInt(range[0]);
x2 = parseInt(range[1])
ctx.strokeStyle = el.style.color; // Цвет линии графика соответствует цвету input-текста
ctx.beginPath();
for(x0 = 0; x0 < ctx.canvas.width; ++ x0) {
x = x0 / ctx.canvas.width * (x2 - x1) - x1;
try {
with(Math) {
drawer(x0, ctx.canvas.height - eval(fn));
}
} catch(err) {
break;
}
drawer = ctx.lineTo.bind(ctx);
}
ctx.stroke();
}
}
</script>
</head>
<body onload='DrawFn()'>
Y1(x)=<input type=text id=Fn1 value='0..10:x**2' onchange='DrawFn()' style=color:magenta><br>
Y2(x)=<input type=text id=Fn1 value='0..2:x+1' onchange='DrawFn()' style=color:red><br>
Y3(x)=<input type=text id=Fn2 value='2..5:x**2+4' onchange='DrawFn()' style=color:orange><br>
Y4(x)=<input type=text id=Fn3 value='5..10:x**2+2*x+1' onchange='DrawFn()' style=color:blue><br>
<canvas width=800px height=600px></canvas>
</body>