Canvas Tangent Line and Point Disappears at x = 2.5 Despite Correct Slope Calculation

I’m trying to visualize a curve and its tangent line using HTML5 canvas. The curve is ( y = x^2 ), and the tangent line should dynamically update as I drag a slider for ( x )-values between 0 and 2.5. The slope calculation works correctly, but as I drag the slider near ( x = 2.5 ), the tangent line and point disappear off the canvas.

Here’s the relevant part of my JavaScript code:

function drawTangentLine(x) {
    // Current slope and tangent line drawing logic
// Limit x to the range 0 to 2.5
    x = Math.min(Math.max(x, 0), 2.5);  // Ensure x stays between 0 and 2.5

    let y = x * x; // y = x^2 at x
    let slope = 2 * x; // Derivative of y = x^2 is 2x

    // Display the current slope
    slopeValue.textContent = slope.toFixed(2);

    // Calculate the tangent line
    let tangentStartX = x - 0.5; // Start of tangent line
    let tangentEndX = x + 0.5;   // End of tangent line

    // Ensure that the tangent line remains within canvas bounds (x range -2 to 2.5)
    tangentStartX = Math.max(tangentStartX, -2); // Limit to left side of curve
    tangentEndX = Math.min(tangentEndX, 2.5);    // Limit to right side of curve

    let tangentStartY = y - slope * (x - tangentStartX); // Adjust Y for slope
    let tangentEndY = y + slope * (tangentEndX - x);     // Adjust Y for slope

    // Convert graph coordinates to canvas coordinates
    let canvasTangentStartX = centerX + tangentStartX * scale;
    let canvasTangentStartY = centerY - tangentStartY * scale;
    let canvasTangentEndX = centerX + tangentEndX * scale;
    let canvasTangentEndY = centerY - tangentEndY * scale;

    // Draw the tangent line
    ctx.beginPath();
    ctx.moveTo(canvasTangentStartX, canvasTangentStartY);
    ctx.lineTo(canvasTangentEndX, canvasTangentEndY);
    ctx.strokeStyle = '#008080'; // Greenish color for tangent
    ctx.lineWidth = 3;
    ctx.stroke();

    // Draw the point of tangency
    let canvasX = centerX + x * scale;
    let canvasY = centerY - y * scale;
    ctx.beginPath();
    ctx.arc(canvasX, canvasY, 6, 0, 2 * Math.PI);
    ctx.fillStyle = '#0000FF'; // Blue dot
    ctx.fill();
}

Here’s the relevant part of my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Änderungsfaktor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Änderungsfaktor</h2>
        <div class="slopeDisplay">Die Steigung beträgt: <span id="slopeValue">0.00</span></div>
        <canvas id="curveCanvas" width="400" height="400"></canvas>
        <div class="slider-container">
            <input type="range" id="xSlider" min="0" max="2.5" step="0.01" value="0">

        </div>
        <div class="description">
            If you drag the tangent line along the curve from ( x = 0 ) to ( x = 2.5 ), the tangent line gets steeper. This also means that the value of the slope becomes greater.
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

I’m using canvas scaling with a defined center and range, and the tangent line should remain visible within the canvas bounds. However, at higher ( x )-values, the tangent line seems to move outside the visible area.

What adjustments should I make to keep the tangent line and point of tangency within the canvas?

The slope value of 2.5 should be the max range for my slider

And this is the issue.

enter image description here