Dynamic Pen Thickness Adjustment for Canvas Drawing

This interactive drawing application allows users to adjust the pen thickness in real-time using a range slider. The canvas allows users to draw with various stroke widths, and the thickness can be modified instantly while drawing. This feature provides a more personalized drawing experience with flexible line sizes.

canvas api

pen thickness canvas drawing range slider interactive JavaScript real-time mouse events dynamic stroke width web app

video

<!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>
    <!-- Slider to adjust the pen thickness -->
    <div>
        <label for="penThickness">Pen Thickness:</label>
        <input type="range" id="penThickness" min="1" max="20" value="5">
        <span id="penValue">5</span> <!-- Displays the current pen thickness -->
    </div>

    <!-- Canvas element to draw on -->
    <canvas id="myCanvas" width="800" height="600"></canvas>

    <script>
        // Get the canvas element and its drawing context
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 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>

CODE SIMULATION

kod

Facebook | Twitter | Linkedin | Whatsapp

index canvas api canvas drawing dynamic pen thi interactive can