Wide-Ranging Random Lines with Undo | Drawing & Interactive Canvas Experience

Explore an interactive canvas that generates random, faint lines to create abstract patterns. With the touch or click of your screen, you can add new lines to the drawing. Plus, you can undo your last drawing with the handy Undo button. Perfect for creative expression and experimenting with random shapes and designs.
canvas api
interactive canvas random lines faint lines abstract patterns drawing touch drawing click drawing undo button interactive art digital art creative canvas touch and click drawing undo feature random drawing patterns canvas art
video
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
    <title>Wide-Ranging Random Lines with Undo</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: "Oswald", serif;
            font-optical-sizing: auto;
            font-weight: <weight>;
            font-style: normal;
        }
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
            cursor: crosshair;
        }
        #controls {
            text-align: center;
            margin-top: 10px;
            position: relative;
            z-index: 10;
        }
        #drawButton, #undoButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 5px;
        }
        #hint {
            text-align: center;
            margin-top: 10px;
            font-size: 18px;
            font-style: italic;
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
<div align="center" style="margin-top:-10px">
    <h3>Wide-Ranging Random Lines with Undo | <a href="https://www.youtube.com/@orbisounds" target="_blank">?? SUBSCRIBE</a> </h3>
    <p style="margin-top:-20px">This canvas contains randomly drawn, faint lines that create abstract patterns. Touch or click to draw lines, and undo your last drawing!</p>
</div>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <div id="controls">
        <button id="drawButton">?? Refresh Drawing</button>
        <button id="undoButton"> ?? Undo</button>
    </div>
    <div id="hint">Wide-ranging faint lines covering the page!</div>
    
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;
        let history = [];  // To store the drawing history (for undo)
        let currentState = -1; // To track the current state for undo functionality

        function drawContinuousCurves() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            const numCurves = 2000; // More lines for a denser image
            ctx.strokeStyle = `rgba(0, 0, 0, 0.7)`; // Faint gray color
            ctx.lineWidth = 0.1; // Thin lines

            // Draw random lines spread across the canvas
            for (let i = 0; i < numCurves; i++) {
                let x = Math.random() * canvas.width;
                let y = Math.random() * canvas.height;

                ctx.beginPath();
                ctx.moveTo(x, y);

                // Create lines with random angles and radii
                const radius = Math.random() * 150 + 50; // Wide-ranging lines
                const angle = Math.random() * Math.PI * 2; // Random angle

                // Set control points and end points for the curves
                const controlX = x + Math.cos(angle + Math.PI / 2) * radius * 1.2;
                const controlY = y + Math.sin(angle + Math.PI / 2) * radius * 1.2;
                const endX = x + Math.cos(angle) * radius * 1.5;
                const endY = y + Math.sin(angle) * radius * 1.5;

                ctx.quadraticCurveTo(controlX, controlY, endX, endY);

                // If the line goes out of bounds, start it from a random point
                if (endX < 0 || endX > canvas.width || endY < 0 || endY > canvas.height) {
                    x = Math.random() * canvas.width;
                    y = Math.random() * canvas.height;
                    ctx.moveTo(x, y);
                }

                ctx.stroke();
            }
            saveState(); // Save the state after drawing
        }

        function startDrawing(event) {
            event.preventDefault();
            isDrawing = true;
            const { offsetX, offsetY } = event.type.includes('touch') ? getTouchPos(event) : event;
            ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; // Black drawing color
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(offsetX, offsetY);
        }

        function draw(event) {
            if (!isDrawing) return;
            event.preventDefault();
            const { offsetX, offsetY } = event.type.includes('touch') ? getTouchPos(event) : event;
            ctx.lineTo(offsetX, offsetY);
            ctx.stroke();
        }

        function stopDrawing() {
            if (!isDrawing) return;
            isDrawing = false;
            ctx.closePath();
            saveState(); // Save state after each drawing action
        }

        function getTouchPos(event) {
            const rect = canvas.getBoundingClientRect();
            const touch = event.touches[0];
            return {
                offsetX: touch.clientX - rect.left,
                offsetY: touch.clientY - rect.top
            };
        }

        function saveState() {
            // Save the current canvas state to the history array
            if (currentState < history.length - 1) {
                history = history.slice(0, currentState + 1); // Discard any redo steps
            }
            history.push(canvas.toDataURL()); // Store the current canvas state as an image
            currentState++;
        }

        function undo() {
            if (currentState > 0) {
                currentState--;
                const previousState = history[currentState];
                const img = new Image();
                img.src = previousState;
                img.onload = function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
                    ctx.drawImage(img, 0, 0); // Draw the previous state
                };
            }
        }

        // Mouse events
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

        // Touch events (for mobile)
        canvas.addEventListener('touchstart', startDrawing, { passive: false });
        canvas.addEventListener('touchmove', draw, { passive: false });
        canvas.addEventListener('touchend', stopDrawing);
        canvas.addEventListener('touchcancel', stopDrawing);

        // Prevent page scroll
        document.body.addEventListener('touchmove', function (event) {
            if (event.target === canvas) {
                event.preventDefault();
            }
        }, { passive: false });

        // Refresh drawing
        document.getElementById('drawButton').addEventListener('click', function() {
            drawContinuousCurves();
        });

        // Undo button functionality
        document.getElementById('undoButton').addEventListener('click', function() {
            undo();
        });

        // Initial drawing load
        drawContinuousCurves();
    </script>
</body>
</html>
CODE SIMULATION
kod
Facebook | Twitter | Linkedin | Whatsapp
index canvas api canvas drawing dynamic pen thi interactive can