<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Pen Thickness</title>
    <style>
        /* Style for the canvas */
        #myCanvas {
            border: 1px solid black; /* Adds a black border to the canvas */
            display: block; /* Ensures canvas is displayed as a block element */
            margin-top: 20px; /* Adds some space above the canvas */
        }

/* Style for the range slider to make it fit the container */
        input[type="range"] {
            width: 100%; /* Makes the slider take up full width */
        }

/* Style for the pen thickness display */
        #penValue {
            font-weight: bold; /* Makes the pen thickness value bold */
            margin-left: 10px; /* Adds space between the slider and value */
        }
    </style>
</head>
<body>
    
    <div>
        <label for="penThickness">Pen Thickness:</label>
        <input type="range" id="penThickness" min="1" max="20" value="5">
        <span id="penValue">5</span> 
    </div>

<canvas id="myCanvas" width="800" height="600"></canvas>

// Get the range slider and the span where pen thickness value will be displayed
        const penThicknessSlider = document.getElementById('penThickness');
        const penValue = document.getElementById('penValue');

// Initialize the pen thickness with the slider's value
        let penThickness = penThicknessSlider.value;
        penValue.textContent = penThickness; // Display the initial pen thickness value

// Add an event listener to update the pen thickness when the slider is moved
        penThicknessSlider.addEventListener('input', function () {
            penThickness = this.value; // Update pen thickness value
            penValue.textContent = penThickness; // Display the new pen thickness value
        });

// Event listener for mouse down on the canvas to start drawing
        canvas.addEventListener('mousedown', function (e) {
            ctx.lineWidth = penThickness; // Set the current pen thickness
            ctx.lineCap = 'butt'; // Ensure the pen tip is not rounded, use 'butt' for straight edges
            ctx.beginPath(); // Start a new path for drawing
            ctx.moveTo(e.offsetX, e.offsetY); // Move to the mouse down position on the canvas

// Add event listener for mouse movement to continue drawing
            canvas.addEventListener('mousemove', draw);
        });

// Event listener for mouse up to stop drawing
        canvas.addEventListener('mouseup', function () {
            canvas.removeEventListener('mousemove', draw); // Remove the draw function when mouse is up
        });

// Function to draw on the canvas as the mouse moves
        function draw(e) {
            ctx.lineTo(e.offsetX, e.offsetY); // Draw a line to the current mouse position
            ctx.stroke(); // Apply the stroke to the canvas
        }
    </script>
</body>
</html>

About THIS CODE (CANVASOR.NET):