IZUM,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Графики</title>
</head>
<body>
<canvas id="canvas" width="400" height="200" style="border:1px solid grey"></canvas>
<script>
function createPath(x1, x2, y, sx, sy) {
const path = new Path2D();
for (let x = x1; x <= x2; x++) {
if (x == x1) {
path.moveTo(x * sx, y(x) * sy);
} else {
path.lineTo(x * sx, y(x) * sy);
}
}
return path;
}
const ctx = canvas.getContext('2d');
ctx.translate(0, 200);
ctx.scale(1, -1);
ctx.strokeStyle = 'red';
ctx.stroke(createPath(0, 2, x => x + 1, 30, 1));
ctx.strokeStyle = 'green';
ctx.stroke(createPath(2, 5, x => x ** 2 + 4, 30, 1));
ctx.strokeStyle = 'blue';
ctx.stroke(createPath(5, 10, x => x ** 2 + 2 * x + 1, 30, 1));
</script>
</body>
</html>