<!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++;
        }

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

About THIS CODE (CANVASOR.NET):