Sign Canvas

#webdev #javascript #beginners #programming
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Canvas</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s;
            background-color: #fff;
            color: #000;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        canvas {
            border: 1px solid #000;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            cursor: default;
            margin-bottom: 20px;
            background-color: #fff;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        input[type="color"], input[type="range"] {
            margin: 5px;
        }

        canvas.active {
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
            cursor: crosshair;
        }

        #themeToggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
            transition: color 0.3s;
        }

        /* Dark theme styles */
        .dark-theme {
            background-color: #121212;
            color: #ffffff;
        }

        .dark-theme canvas {
            /* border: 1px solid #ffffff; */
            box-shadow: 0 0 12px 3px white;
            background-color: #2b2b2b;
        }

        .dark-theme button {
            background-color: #333;
            color: #ffffff;
        }

        .dark-theme #themeToggle {
            color: #ffdd00;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="drawingCanvas" width="300" height="300"></canvas>
        <button id="writeButton">Enable Drawing</button>

        <!-- Color picker -->
        <label for="colorPicker">Pick a color:</label>
        <input type="color" id="colorPicker" value="#000000">

        <!-- Line Width Control -->
        <label for="lineWidth">Line Width:</label>
        <input type="range" id="lineWidth" min="1" 
        max="10" value="2">

    </div>

    <!-- Moon icon for theme toggle -->
    <div id="themeToggle">🌙</div>

    <script>
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');
        const button = document.getElementById('writeButton');
        const colorPicker = document.getElementById('colorPicker');
        const lineWidthControl = document.getElementById('lineWidth');
        const themeToggle = document.getElementById('themeToggle');
        let isDrawing = false;
        let canDraw = false;

        // Toggle drawing mode
        button.addEventListener('click', () => {
            canDraw = !canDraw;
            button.textContent = canDraw ? 
            'Disable Drawing' : 'Enable Drawing';
            canvas.classList.toggle('active', canDraw);
        });

        // Start drawing
        canvas.addEventListener('mousedown', (e) => {
            if (!canDraw) return;
            isDrawing = true;
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
        });

        // Drawing on the canvas
        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = colorPicker.value; // Use selected color
            ctx.lineWidth = lineWidthControl.value; // Use selected line width
            ctx.stroke();
        });

        // Stop drawing
        canvas.addEventListener('mouseup', () => {
            if (!canDraw) return;
            isDrawing = false;
            ctx.closePath();
        });

        // Dark theme toggle
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-theme');
            if (document.body.classList.contains('dark-theme')) {
                themeToggle.textContent = '☀️'; // Change to sun icon
            } else {
                themeToggle.textContent = '🌙'; // Change to moon icon
            }
        });

    </script>
</body>
</html>
DEV Community

Sign Canvas

Top comments (0)

Read next

Five cool JavaScript tricks

Microservices with SpringBoot 🔥

Creating a NextJS Web App With 0 Web Dev Experience

🤖 From Chatbots to Personal Assistants: Building LLM Apps in JavaScript
